Learn how to handle many jquery ajax responses with just 1 callback easily.

Have you ever tried to make multiple ajax request to the server? This task becomes really chaotic if you don't know how to handle them properly (clean code, maintainability etc.). For a "beginner", the following example would do the trick:

Note: we use the cors-anywhere url before every original url to prevent CORS request errors in this example, you need to use your own URL'S:

var $requestUrlExample = "https://cors-anywhere.herokuapp.com/http://jsfiddle.net/api/user/ourcodeworld/demo/list.json";
var $requestUrlTwo = "https://cors-anywhere.herokuapp.com/http://jsfiddle.net/api/user/ourcodeworld/demo/list.json?start=1&limit=1";
var $requestUrlThree = "https://cors-anywhere.herokuapp.com/https://api.github.com/repos/sdkcarlos/artyom.js";

$.getJSON($requestUrlExample,function(resp1){
    $.getJSON($requestUrlTwo,function(resp2){
        $.getJSON($requestUrlThree,function(resp3){
            // Here all the responses will be available
            console.log(resp1);
            console.log(resp2);
            console.log(resp3);
        });
    });
});

And it works, remember "If it's stupid and it works, it ain't stupid", a simple hierarchical request example. However there's a cleaner way to achieve multiple requests and handle them with just one callback.

In this case we will use $.when function, when provides a way to execute callback functions based on zero or more objects, usually Deferred objects that represent asynchronous events .If no arguments are passed to jQuery.when(), it will return a resolved Promise. If a single Deferred is passed to jQuery.when(), its Promise object (a subset of the Deferred methods) is returned by the method.

 In the following example we will execute 3 json request to different url's with json format and we will handle all the content with just 1 callback.

var $requestUrlExample = "https://cors-anywhere.herokuapp.com/http://jsfiddle.net/api/user/ourcodeworld/demo/list.json";
var $requestUrlTwo = "https://cors-anywhere.herokuapp.com/http://jsfiddle.net/api/user/ourcodeworld/demo/list.json?start=1&limit=1";
var $requestUrlThree = "https://cors-anywhere.herokuapp.com/https://api.github.com/repos/sdkcarlos/artyom.js";

$.when($.getJSON($requestUrlExample),$.getJSON($requestUrlTwo),$.getJSON($requestUrlThree)).then(function (resp1,resp2,resp3) {
    // The request reponse will be retrieven respectively of the given order
    // Response structure : [responseContent,strinStatus("sucess" or "error"),xhrObject]
    console.log(resp1); // to retrieve the real content use resp[0]
    console.log(resp2);
    console.log(resp3);
}).fail(function (problem) {
    // handle errors (some request has failed)
    console.log(problem);
});

Obviously if 1 request fails, then you cannot retrieve the result of the other requests, but using when you'll be able to handle the error too. Play with the following fiddle which contains the previous code (navigate to Result tab):

Using the when function makes your code cleaner and compact. This feature is available since jQuery V1.5, you can read more about when function here.

Note that you can use $.ajax({url:"mypath"}) object too and not only $.get , $getJSON or $.post functions. Have fun !


Interested in programming since he was 14 years old, Carlos is a self-taught programmer and founder and author of most of the articles at Our Code World.

Become a more social person

Sponsors