How can you chain three asynchronous calls in jQuery using Promises, passing data from one call to the next?

Chaining Three Asynchronous Calls with jQuery Promises

In this question, we explore a scenario where you have three asynchronous HTTP requests to make in a synchronous manner, and you need to pass data from one call to the next.

Initial Approach:

As mentioned in the question, you attempted to use deferreds for the first two functions. This was a good start, but it only covered the case of two functions. Extending it to three functions requires a slightly different approach.

Chaining with JqXHR Objects:

The key to chaining multiple asynchronous calls is to return the jqXHR object returned by $.ajax() in each function. These objects are Promise-compatible and can be chained using .then()/.done()/.fail()/.always().

Updated Code:

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);
}

In this updated code, the first() function returns the jqXHR object from its AJAX call, which is then passed as an argument to the second() function. The second() function, in turn, returns its jqXHR object, which is passed to the third() function.

Passing Data Between Functions:

The arguments data, textStatus, and jqXHR arise from the $.ajax() call in the previous function. This means that first() feeds second(), and second() feeds third(). Therefore, you can use these arguments to pass data from one function to the next.

Demo:

The code below demonstrates the chaining of three asynchronous calls using jQuery promises. It uses $.when('foo') to deliver a fulfilled promise in place of $.ajax(...).

function first() {
   return $.when('foo');
}

function second(data) {
   return $.when('bar' + data);
}

function third(data) {
   return $.when('baz' + data);
}

first().then(second).then(third)
  .done(function(data) {
     console.log(data); // Logs "bazbarfoo"
  });

The above is the detailed content of How can you chain three asynchronous calls in jQuery using Promises, passing data from one call to the next?. For more information, please follow other related articles on the PHP Chinese website!