Promise.all

promise-all.md

Promise.all

Chaining promises lets us make a series of requests, one after another, knowing that each request will finish before the next one starts. But what if we want to make multiple requests at the same time, then wait for all of them to finish before doing something else?

Promise.all() solves this problem, making it possible to send multiple requests and receive multiple responses at the same time, even if we don't know the exact number of requests ahead of time. This lets you display data from multiple requests more quickly to the user.

Promise.all() takes an array of promises as an argument, and returns a single promise that resolves when all the promises passed to Promise.all() have resolved. The fact that Promise.all() returns a promise means we can chain a .then() call after Promise.all() as follows:

const axios = require('axios');
const BASE_URL = 'http://localhost:5000';

Promise.all([
   axios.get(`${BASE\_URL}/constellations/UEUrlfX`),
   axios.get(`${BASE\_URL}/constellations/zb8QvVt`),
   axios.get(`${BASE\_URL}/constellations/32TN5F8`),

]).then((results) => {
   console.log(results[0].data);
   console.log(results[1].data);
   console.log(results[2].data);
});

Note that the promise returned by Promise.all() will reject immediately if any one of the promises passed to Promise.all() rejects. You can add a .catch() call after .then() to handle that contingency.

Unknown number of promises

What if you need to make an unknown number of requests, and wait for all of them to resolve before doing something else?

For example, imagine you want to build a function that takes in an array of IDs. For each of those IDs, a request will be made to get information about that record.

const axios = require('axios');

function getConstellations(ids) {
  // ??
}

You don't know how many IDs will be passed to the getConstellations() function, however you can use each of those IDs to create an array of promises as follows. Then, you pass that array of promises to Promise.all() which returns a promise that gets returned by the getConstellations() function. So, getConstellations() returns a promise that resolves once all our requests resolve.

function getConstellations(ids) {
    const promises = ids.map((id) => {
       const url = `${BASE\_URL}/constellations/${id}`;
       return axios.get(url);
    });
    return Promise.all(promises);
}

const ids = ['KGQIwSq', '32TN5F8'];

getConstellations(ids).then(console.log);

Note Promise.allSettled() is an alternative to Promise.all() that always returns the result of each individual promise, including whether the promise was fulfilled or rejected.