How do I chain three asynchronous calls using jQuery promises?

Question

I have three HTTP calls that need I need to make in a synchronous manner and how do I pass data from one call to the other?

function first() {    ajax() }  function second() {    ajax() }  function third() {    ajax() }   function main() {     first().then(second).then(third) } 

I tried to use the deferred for the two functions and I came up with a partial solution. Can I extend it to be for three functions?

function first() {     var deferred = $.Deferred();      $.ajax({               "success": function (resp)              {                   deferred.resolve(resp);              },           });     return deferred.promise(); }  function second(foo) {      $.ajax({             "success": function (resp)             {             },             "error": function (resp)             {             }         }); }   first().then(function(foo){second(foo)}) 

Answer 1

In each case, return the jqXHR object returned by $.ajax().

These objects are Promise-compatible so can be chained with .then()/.done()/.fail()/.always().

.then() is the one you want in this case, exactly as in the question.

function first() {    return $.ajax(...); }  function second(data, textStatus, jqXHR) {    return $.ajax(...); }  function third(data, textStatus, jqXHR) {    return $.ajax(...); }  function main() {     first().then(second).then(third); } 

Arguments data, textStatus and jqXHR arise from the $.ajax() call in the previous function, ie. first() feeds second() and second() feeds third().

DEMO (with $.when('foo') to deliver a fulfilled promise, in place of $.ajax(...)).

Answer 2

There is actually a much easier approach when using promises with jQuery. Have a look at the following:

$.when(     $.ajax("/first/call"),     $.ajax("/second/call"),     $.ajax("/third/call")     )     .done(function(first_call, second_call, third_call){         //do something     })     .fail(function(){         //handle errors     }); 

Simply chain all your calls into the $.when(...) call and handle the return values in the .done(...) call.

Here's a walkthrough if you prefer: http://collaboradev.com/2014/01/27/understanding-javascript-promises-in-jquery/