How to wait until multiple ajax requests are done?

Question

I have some async ajax requests

$.ajax({
    url: 'first.php',
    async: true,
    success: function (data) {
        //do stuff
    }
});

$.ajax({
    url: 'second.php',
    async: true,
    success: function (data) {
        //do stuff
    }
});

...

$.ajax({
    url: 'nth.php',
    async: true,
    success: function (data) {
        //do stuff
    }
});

I want to run console.log() when every request is done.

I usually write this code:

$.ajax({
    url: 'first.php',
    async: true,
    success: function (data) {
        $.ajax({
            url: 'second.php',
            async: true,
            success: function (data) {
                //till the last ajax
            }
        });
    }
});

However someone suggest Promise.all([]).

If I had to run, lets say, 4 ajax requests, which method would be the best/quickest?

Does this answer your question? [How to return many Promises in a loop and wait for them all to do other stuff](https://stackoverflow.com/questions/31426740/how-to-return-many-promises-in-a-loop-and-wait-for-them-all-to-do-other-stuff) — sandrooco, Sep 01 '20 at 14:06
@sandrooco Mh, I don't have any loop, however the answer you suggests me is about `Promise.all([])`. What about `when()`? — Vinserello, Sep 01 '20 at 14:23
@Vinserello jQuery's `$.when()` existed before `Promise.all()` became a standard. Since a few years `$.ajax` is fully compatible with native promises and thus with `Promise.all()`. — sandrooco, Sep 01 '20 at 14:44

score 2 · Accepted Answer · answered Sep 01 '20 at 14:12

Use Promise.all().

var promises = [];

promises.push(new Promise(done=>{
  $.ajax({
      url: 'first.php',
      async: true,
      success: done
  });
}));

promises.push(new Promise(done=>{
  $.ajax({
      url: 'second.php',
      async: true,
      success: done
  });
}));

promises.push(new Promise(done=>{
  $.ajax({
      url: 'nth.php',
      async: true,
      success: done
  });
}));

Promise.all(promises).then(()=>{
  console.log("All ajax completed.");
});

Amazing, you confirmed `Promise.all()`, but, what's the difference with `when()`? — Vinserello, Sep 01 '20 at 14:24

score 0 · Answer 2 · answered Sep 01 '20 at 14:16

The official jQuery documentation states that:

The jqXHR objects returned by $.ajax() as of jQuery 1.5 implement the Promise interface, giving them all the properties, methods, and behavior of a Promise (see Deferred object for more information).

jQuery.when():

Provides a way to execute callback functions based on zero or more Thenable objects, usually Deferred objects that represent asynchronous events.

So you can do something like:

jQuery.when(
    $.ajax({
        url: 'first.php',
        async: true,
        success: function (data) {
            //do stuff
        }
    }),

    $.ajax({
        url: 'second.php',
        async: true,
        success: function (data) {
            //do stuff
        }
    }),

    ...,

    $.ajax({
        url: 'nth.php',
        async: true,
        success: function (data) {
            //do stuff
        }
    })
).then(function() {console.log(...);});

I've never considered `when()`. Mayit be prefered to `Promise.all([]).then()`? — Vinserello, Sep 01 '20 at 14:26
`$.when()` is the jQuery alternative to the "vanilla" `Promise.all()`. They pretty much do the same thing, apart from some syntax differences. I proposed the jQuery version, since you were already using jQuery for the ajax requests (consistency). As a fun fact, `$.when()` was available about 3 years before `Promise.all()` first got natively implemented in browsers. — Zoli Szabó, Sep 02 '20 at 11:37

How to wait until multiple ajax requests are done?

2 Answers2