Fulfill numerous AJAX requests in parallel and run the function after they all complete

Question

I am trying to perform the following sequence of operations using jQuery in HTML.

• URL list created
• Each of these URLs is requested in parallel with $ .getJSON (url)
• Wait until all requests complete or fail (404 may happen)
• Take data on all executed JSON requests and do something.

I built the javascript code below. It works fine if only one of the requests fails due to a 404 error: then it $.whendoes not start because it is interrupted instantly if the requests fail. Can you somehow redefine ajax requests so that they do not fail, but instead return an empty source?

I already read this and this , but it does not give a solution where the code can be run after all requests are completed.

function fetchData() {
    queries = [];
    //urls is initialized somewhere else containing all urls
    for(var url in urls) {
        queries.push($.getJSON(url));
    }

    $.when.apply(this, queries).done(function() {
        console.log("Finished all queries, got "+arguments.length+" results");
        //Now arguments is a array containing the results of all requests
    }

    //function returns instantly, no problem!
 }

Answer 1

I could do something like this:

$(document).ready(function(){
    var _q = ['/echo/json/', '/echo/json/', 'mybadurl'];
    var _d = [];
    for(u in _q)
    {
        $.ajax({
            url: _q[u],
            success: function(data){
                pushData(data);
            },
            error: function(x){
                pushData(x);
            }
        });
    }

    function pushData(d)
    {
        _d.push(d);
        if(_d.length == _q.length)
        {
            alert('were done');
        }
    }
});

Here you push the data from success or error to the array _dand test to make sure you get all the answers before continuing ( alert('were done');).

Of course, you could do it smarter by clicking on an object that contains the op state along with the payload in _d, but it was a quick hack to demonstrate how I would most likely do what you asking.

Spell here

Answer 2

- :

function fetchData() {
    queries = [];
    //urls is initialized somewhere else containing all urls
    for(var url in urls) {
        queries.push($.getJSON(url));
    }

    var returned = 0;
    for (var i = 0; i < queries.length; i += 1) {
        call_ajax_somehow(queries[i], function () {
            console.log("callback called");
            returned += 1;
            if (returned === queries.length) {
                console.log("Got all " + queries.length + " of them");
            }
        });
    }
 }

jQuery ajax , ( , ), .

Answer 3

- :

function fetchData() {
    var queriesRun = 0;
    var allData = [];

    var urls = ["http://stackoverflow.com", 
                "http://stackoverflow.com", 
                "http://stackoverflow.com", 
                "http://stackoverflow.com", 
                "http://stackoverflow.com/thisdoesnotexist"];

    var totalQueries = urls.length;

    var complete = function(jqXHR, textStatus) {
        queriesRun++;
        console.log(queriesRun);

        if(queriesRun == totalQueries) {
           console.log("all done");
           console.log(allData);
        }
    };

    for(var i = 0; i < urls.length; i++) {
        var url = urls[i];
        jQuery.ajax({
           url: url,          
           success: function(data, textStatus, jqXHR) {
              allData.push(data);
           },
           complete: complete
        });
    }
}

complete error success, queriesRun , AJAX . , . , .

console.log , , ( firebug).