What is the use of `Promise.all()`

TL;DR

Promise.all() accepts an iterable of promises or values and returns a promise fulfilled with results in input order once every input fulfills. It rejects as soon as an input rejects. It does not start the operations or cancel the remaining work; create the promises first, and use AbortController or an operation-specific mechanism when cancellation is required.

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // [3, 42, 'foo']
});

Aggregate completion

Promise.all() subscribes to every input concurrently and preserves input order in its result, regardless of completion order.

Fail-fast rejection does not cancel the other operations; cancellation must be designed separately, for example with AbortController.

What is the use of Promise.all()

Overview

Promise.all() is a static method of the Promise object that is used to handle multiple promises concurrently. It takes an iterable (usually an array) of promises and returns a single promise that resolves when all the promises in the iterable have resolved or rejects if any of the promises reject.

Syntax

Promise.all(iterable);

• iterable: An iterable object, such as an array, containing promises.

How it works

When you pass an array of promises to Promise.all(), it returns a new promise. This new promise:

• Resolves when all the promises in the array have resolved. The resolved value is an array of the resolved values of the input promises, in the same order as the input promises.
• Rejects as soon as any input promise rejects. The rejection reason comes from the first rejection observed, which is not necessarily the first item in input order. Other operations continue running unless they are canceled separately.

Example

Here is an example to illustrate how Promise.all() works:

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'one');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 200, 'two');
});

Promise.all([promise1, promise2])
  .then((values) => {
    console.log(values); // ['one', 'two']
  })
  .catch((error) => {
    console.error(error);
  });

In this example, Promise.all() waits for both promise1 and promise2 to resolve. Once both promises have resolved, it logs the array of resolved values.

Error handling

If any of the promises passed to Promise.all() reject, the returned promise will immediately reject with the reason of the first promise that rejects.

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'one');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(reject, 200, 'two');
});

Promise.all([promise1, promise2])
  .then((values) => {
    console.log(values);
  })
  .catch((error) => {
    console.error(error); // 'two'
  });

In this example, promise2 rejects after 200 milliseconds, causing the Promise.all() promise to reject immediately with the reason 'two'.

Use cases

• Concurrent API requests: When independent requests have already been started and you need all of their results before proceeding.
• Batch processing: When multiple asynchronous tasks can overlap and all must fulfill.
• Data aggregation: When you need to gather data from multiple sources and combine the results.

Further reading

• MDN Web Docs on Promise.all()
• JavaScript Promises: An Introduction
• Understanding JavaScript Promises

Exercises

const slow = new Promise((resolve) => setTimeout(() => resolve('slow'), 20));
const fast = Promise.resolve('fast');

Promise.all([slow, fast]).then((values) => console.log(values.join(',')));