How to Chain Asynchronous Calls and Pass Data Between Them with jQuery Promises?

Chaining Asynchronous Calls with jQuery Promises

How can I chain three asynchronous calls using jQuery promises and pass data between them?

When dealing with three HTTP calls that need to execute sequentially, consider utilizing jQuery promises to chain the calls and facilitate data transfer.

Initially, attempting to use deferred objects for two functions yields a partial solution. However, extending this approach to three functions requires a different strategy.

Chain the Calls and Pass Data

In each call, return the jqXHR object generated by $.ajax(). These objects adhere to the Promise interface and can be chained using .then()/.done()/.fail()/.always().

<code class="javascript">function first() {
   return $.ajax(...);
}

function second(data, textStatus, jqXHR) {
   return $.ajax(...);
}

function third(data, textStatus, jqXHR) {
   return $.ajax(...);
}</code>

Within the main function, chain the functions with .then() as follows:

<code class="javascript">function main() {
    first().then(second).then(third);
}</code>

The data, textStatus, and jqXHR arguments passed to subsequent functions originate from the $.ajax() call in the preceding function. This allows each function to access and utilize the output of the previous call.

For illustrative purposes, a demo below uses $.when('foo') instead of $.ajax(...) to provide a fulfilled promise.

<code class="javascript">function main() {
    $.when('foo').then(second).then(third);
}</code>

By chaining the promises and passing data in this manner, you can execute the three asynchronous calls synchronously and effectively.

The above is the detailed content of How to Chain Asynchronous Calls and Pass Data Between Them with jQuery Promises?. For more information, please follow other related articles on the PHP Chinese website!