How to chain ajax calls using jquery

Question

I need to make a series of N ajax requests without locking the browser, and want to use the jquery deferred object to accomplish this.

Here is a simplified example with three requests, but my program may need to queue up over 100 (note that this is not the exact use case, the actual code does need to ensure the success of step (N-1) before executing the next step):

$(document).ready(function(){

    var deferred = $.Deferred();

    var countries = ["US", "CA", "MX"];

    $.each(countries, function(index, country){

        deferred.pipe(getData(country));

    });

 });

function getData(country){

    var data = {
        "country": country  
    };


    console.log("Making request for [" + country + "]");

    return $.ajax({
        type: "POST",
        url: "ajax.jsp",
        data: data,
        dataType: "JSON",
        success: function(){
            console.log("Successful request for [" + country + "]");
        }
    });

}

Here is what gets written into the console (all requests are made in parallel and the response time is directly proportional to the size of the data for each country as expected:

Making request for [US]
Making request for [CA]
Making request for [MX]
Successful request for [MX]
Successful request for [CA]
Successful request for [US]

How can I get the deferred object to queue these up for me? I've tried changing done to pipe but get the same result.

Here is the desired result:

Making request for [US]
Successful request for [US]
Making request for [CA]
Successful request for [CA]
Making request for [MX]
Successful request for [MX]

Edit:

I appreciate the suggestion to use an array to store request parameters, but the jquery deferred object has the ability to queue requests and I really want to learn how to use this feature to its full potential.

This is effectively what I'm trying to do:

when(request[0]).pipe(request[1]).pipe(request[2])... pipe(request[N]);

However, I want to assign the requests into the pipe one step at a time in order to effectively use the each traversal:

deferred.pipe(request[0]);
deferred.pipe(request[1]);
deferred.pipe(request[2]);

Solution 1

With a custom object

function DeferredAjax(opts) {
    this.options=opts;
    this.deferred=$.Deferred();
    this.country=opts.country;
}
DeferredAjax.prototype.invoke=function() {
    var self=this, data={country:self.country};
    console.log("Making request for [" + self.country + "]");

    return $.ajax({
        type: "GET",
        url: "wait.php",
        data: data,
        dataType: "JSON",
        success: function(){
            console.log("Successful request for [" + self.country + "]");
            self.deferred.resolve();
        }
    });
};
DeferredAjax.prototype.promise=function() {
    return this.deferred.promise();
};


var countries = ["US", "CA", "MX"], startingpoint = $.Deferred();
startingpoint.resolve();

$.each(countries, function(ix, country) {
    var da = new DeferredAjax({
        country: country
    });
    $.when(startingpoint ).then(function() {
        da.invoke();
    });
    startingpoint= da;
});

Fiddle http://jsfiddle.net/7kuX9/1/

To be a bit more clear, the last lines could be written

c1=new DeferredAjax( {country:"US"} );
c2=new DeferredAjax( {country:"CA"} );
c3=new DeferredAjax( {country:"MX"} );

$.when( c1 ).then( function() {c2.invoke();} );
$.when( c2 ).then( function() {c3.invoke();} );

With pipes

function fireRequest(country) {
        return $.ajax({
            type: "GET",
            url: "wait.php",
            data: {country:country},
            dataType: "JSON",
            success: function(){
                console.log("Successful request for [" + country + "]");
            }
        });
}

var countries=["US","CA","MX"], startingpoint=$.Deferred();
startingpoint.resolve();

$.each(countries,function(ix,country) {
    startingpoint=startingpoint.pipe( function() {
        console.log("Making request for [" + country + "]");
        return fireRequest(country);
    });
});

http://jsfiddle.net/k8aUj/1/

Edit : A fiddle outputting the log in the result window http://jsfiddle.net/k8aUj/3/

Each pipe call returns a new promise, which is in turn used for the next pipe. Note that I only provided the sccess function, a similar function should be provided for failures.

In each solution, the Ajax calls are delayed until needed by wrapping them in a function and a new promise is created for each item in the list to build the chain.

I believe the custom object provides an easier way to manipulate the chain, but the pipes could better suit your tastes.

Note : as of jQuery 1.8, deferred.pipe() is deprecated, deferred.then replaces it.

Solution 2

Note: As of jquery 1.8 you can use .then instead of .pipe. The .then function now returns a new promise and .pipe is deprecated since it is no longer needed. See promises spec for more info about promises, and the q.js for a cleaner library of javascript promises without a jquery dependency.

countries.reduce(function(l, r){
  return l.then(function(){return getData(r)});
}, $.Deferred().resolve());

and if you like to use q.js:

//create a closure for each call
function getCountry(c){return function(){return getData(c)};}
//fire the closures one by one
//note: in Q, when(p1,f1) is the static version of p1.then(f1)
countries.map(getCountry).reduce(Q.when, Q());

Original answer:

Yet another pipe; not for the faint hearted, but a little bit more compact:

countries.reduce(function(l, r){
  return l.pipe(function(){return getData(r)});
}, $.Deferred().resolve());

Reduce documentation is probably the best place to start understanding how the above code works. Basically, it takes two arguments, a callback and an initial value.

The callback is applied iteratively over all elements of the array, where its first argument is fed the result of the previous iteration, and the second argument is the current element. The trick here is that the getData() returns a jquery deferred promise, and the pipe makes sure that before the getData is called on the current element the getData of the previous element is completed.

The second argument $.Deferred().resolve() is an idiom for a resolved deferred value. It is fed to the first iteration of the callback execution, and makes sure that the getData on the first element is immediately called.

Solution 3

I'm not exactly sure why you would want to do this, but keep a list of all of the URLs that you need to request, and don't request the next one until your success function is called. I.E., success will conditionally make additional calls to deferred.

Solution 4

I know I'm late to this, but I believe your original code is mostly fine but has two (maybe three) problems.

Your getData(country) is being called immediately because of how you coded your pipe's parameter. The way you have it, getData() is executing immediately and the result (the ajax's promise, but the http request begins immediately) is passed as the parameter to pipe(). So instead of passing a callback function, you're passing an object - which causes the pipe's new deferred to be immediately resolved.

I think it needs to be

deferred.pipe(function () { return getData(country); });

Now it's a callback function that will be called when the pipe's parent deferred has been resolved. Coding it this way will raise the second problem. None of the getData()s will execute until the master deferred is resolved.

The potential third problem could be that since all your pipes would be attached to the master deferred, you don't really have a chain and I'm wondering if it might execute them all at the same time anyways. The docs say the callbacks are executed in order, but since your callback returns a promise and runs async, they might all still execute somewhat in parallel.

So, I think you need something like this

var countries = ["US", "CA", "MX"];
var deferred = $.Deferred();
var promise = deferred.promise();

$.each(countries, function(index, country) {
    promise = promise.pipe(function () { return getData(country); });
});

deferred.resolve();

Solution 5

I've had success with jQuery queues.

$(function(){
    $.each(countries, function(i,country){
      $('body').queue(function() {
        getData(country);
      });
    });
});

var getData = function(country){
  $.ajax({
    url : 'ajax.jsp',
    data : { country : country },
    type : 'post',
    success : function() {                          
      // Que up next ajax call
      $('body').dequeue();
    },
    error : function(){
      $('body').clearQueue();
    }
  });
};

View more solutions