Keep sending HTTP requests until a 404 error is received

Question

Keep sending HTTP requests until a 404 error is received

I need to keep sending http requests until I receive an error 404 response from one of them.

There are a total of 21 pages and my current setup looks like this:

_getAll = function () {

var promises = [];
var pages = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21];
angular.forEach(pages, function (page) {
    var deffered = $q.defer();
        $http({
            url: 'http://api.tvmaze.com/shows?page=' + page,
            method: 'GET'
        }).
            success(function (data) {
                console.log("OK")
                deffered.resolve(data);
            }).
            error(function (error) {
                deffered.reject(error);
                console.log(error.status);
            });
        promises.push(deffered.promise)
    })
    return $q.all(promises);
},

However, when trying to access , it returns a 404 error.

Is there a way to continue making http requests until a 404 response is received? Whether through looping or another method?

javascript angularjs http

Answer 1

Answer №1

To handle asynchronous calls efficiently, implementing a while loop wouldn't be suitable as it would attempt to make calls to numerous pages in milliseconds without even loading the initial page. It is essential to wait for each page request to finish before proceeding to load the next one.

An alternative approach is to create a function responsible for fetching a single page and then triggering it with the subsequent page number upon successful loading. When an error occurs, execute a final success callback function and return the collected data.

_getAll = function(callback) {

    var pageData=[];

    function getPage(page) {
        $http({
            url: 'http://api.tvmaze.com/shows?page=' + page,
            method: 'GET'
        }).
        success(function (data) {
            pageData.push(data);
            //get next page
            getPage(page + 1);
            console.log("OK")
        }).
        error(function (error) {
            //Hit an error. All done. Trigger callback.
            callback(pageData);
            console.log(error.status);
        });
    }

    //get first page
    getPage(0);
}

//usage:

_getAll(function(data){
    //this function will trigger once we get an error
    //data will be an array of all of the pages data
   console.log(data); 
});

Answer 2

To handle asynchronous calls efficiently, implementing a while loop wouldn't be suitable as it would attempt to make calls to numerous pages in milliseconds without even loading the initial page. It is essential to wait for each page request to finish before proceeding to load the next one.

An alternative approach is to create a function responsible for fetching a single page and then triggering it with the subsequent page number upon successful loading. When an error occurs, execute a final success callback function and return the collected data.

_getAll = function(callback) {

    var pageData=[];

    function getPage(page) {
        $http({
            url: 'http://api.tvmaze.com/shows?page=' + page,
            method: 'GET'
        }).
        success(function (data) {
            pageData.push(data);
            //get next page
            getPage(page + 1);
            console.log("OK")
        }).
        error(function (error) {
            //Hit an error. All done. Trigger callback.
            callback(pageData);
            console.log(error.status);
        });
    }

    //get first page
    getPage(0);
}

//usage:

_getAll(function(data){
    //this function will trigger once we get an error
    //data will be an array of all of the pages data
   console.log(data); 
});

Answer 3

Answer №2

Implementing proper error handling with $q.all will allow you to achieve this task efficiently. Below is the code along with an explanation:</p>

<pre><code>_getAll = function() {

    var pages = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21];
    return $q.all(pages.map(function(page) {
        return $http({
            url: 'http://api.tvmaze.com/shows?page=' + page,
            method: 'GET'
        })
        .then(function(response) {
            return response.data;
        }, angular.noop);
    }))
    .then(function(data) {
        data.pop();
        return data;
    });
};

Note that using angular.noop in the then callback of individual requests helps in handling failed requests (such as status 404) effectively. This allows for a smooth recovery from error situations where there are no more pages available. The resulting array of data does not contain any undefined values as the last element by removing the unnecessary undefined element returned by angular.noop for 404 pages.

Check out the Demo: http://plnkr.co/edit/CR711Js1KvrvnvKDonXK?p=preview

Answer 4

Implementing proper error handling with $q.all will allow you to achieve this task efficiently. Below is the code along with an explanation:</p>

<pre><code>_getAll = function() {

    var pages = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21];
    return $q.all(pages.map(function(page) {
        return $http({
            url: 'http://api.tvmaze.com/shows?page=' + page,
            method: 'GET'
        })
        .then(function(response) {
            return response.data;
        }, angular.noop);
    }))
    .then(function(data) {
        data.pop();
        return data;
    });
};

Note that using angular.noop in the then callback of individual requests helps in handling failed requests (such as status 404) effectively. This allows for a smooth recovery from error situations where there are no more pages available. The resulting array of data does not contain any undefined values as the last element by removing the unnecessary undefined element returned by angular.noop for 404 pages.

Check out the Demo: http://plnkr.co/edit/CR711Js1KvrvnvKDonXK?p=preview

Keep sending HTTP requests until a 404 error is received

Answer №1

Answer №2

Similar questions

utilize jquery ajax to input various data

An error occurred when attempting to access data within a variable that is undefined, resulting in a TypeError at the errorHandler function

Detecting mistakes using ES6 assurances and BookshelfJS

Display PHP output for a brief moment

The pagination feature of the material-ui data grid is experiencing issues with double clicks because of its compatibility with the react-grid-layout library for

Transform HTML components into visual representations (on the server)

Display a modal upon successful validation of a form

Discovering the present width of an Angular element after it has been eliminated

Error 414: The URL exceeds the maximum length and cannot be processed

Replace a string in an array using JavaScript

Inspecting the final element of my jQuery slider

Error: The promise was not caught due to a network issue, resulting in a creation error

Create HTML elements based on the information in a JSON object

I am experiencing issues with local storage getItem() function not functioning properly within NUXT JS

Method for transmitting JSON array from Controller to View using CodeIgniter

Tips for exiting a function at a particular point

Error encountered during Angular unit testing: Unable to read the 'id' property of a null value. (Jasmine, Karma)

"Error occurs when passing data back to main thread from a web worker: undefined data received

Trouble updating document with MongoDB updateOne when using ID as filter

Utilizing hooks in node.js functions