How to wait for all promises to resolve in JavaScript

In JavaScript from time to time you might end up needing to wait for multiple promises/requests/async actions at a given time, if you just have one or two sequential calls then this might be easy enough to solve without much additional work.

But what happens when you have many or you don’t need or want them to be sequential? In this post we are going to look at how we can solve this problem with the use of Promise.all.

How to wait for all promises to resolve in JavaScript

To wait for all promises to resolve in JavaScript, you just need to add them into an array which can then be passed into the Promise.all method which will wait for all of the promises passed in to be resolved before carrying on.

Here is an example of how to use Promise.all:

const requestOne = fetch('example.com/1');
const requestTwo = fetch('example.com/2');
const requestThree = fetch('example.com/3');

const responses = await Promise.all([requestOne, requestTwo, requestThree]);

Alternatively instead of using the async/await syntax you could instead make use of promise.all().then like so:

const requestOne = fetch('example.com/1');
const requestTwo = fetch('example.com/2');
const requestThree = fetch('example.com/3');

Promise.all([requestOne, requestTwo, requestThree]).then(responses => {
…
});

In the above examples we are creating three requests and storing them in variables, but you can notice that we are not waiting for the requests to resolve and we are simply storing the promises rather than the results.

We then pass these promises stored in our variables into the Promise.all method and await it to complete to get all the values once they have all been resolved.

Just to illustrate it further, if we were to do this sequentially, one by one, it would instead look like the following:

const requestOne = await fetch('example.com/1');
const requestTwo = await fetch('example.com/2');
const requestThree = await fetch('example.com/3');

Advantages and disadvantages of Promise.all

Both cases have their uses, advantages and disadvantages but to keep things simple one of the core benefits of making use of Promise.all is that you will be able to make multiple requests at once so that any given request does not block the others from loading.

What this means is that if the promises are heavy or slow by grouping them together you will only ever have to wait for the longest one rather than having to wait for all the requests individually because they will all resolve irrespective of each other.

For example, let’s say that we are using 3 requests, the first takes 5 seconds to resolve, the second takes 2 seconds to resolve, and the third takes 3 seconds to resolve.

By using Promise.all to resolve them all at once we will only have to wait for the longest request which will take 5 seconds.

However, using the same example, if we waited for each Promise to resolve sequentially, we would have a total waiting time of 10 seconds (request 1 + request 2 + request 3 = 5 seconds + 2 seconds + 3 seconds = 10 seconds), double that of using Promise.all.

Summary

There we have how to wait for all promises to resolve in JavaScript, if you want more like this be sure to check out some of my other posts!