Promise.all(): Wait for Multiple Promises at Once

Why it exists

JavaScript is single-threaded, so long-running tasks like network requests must be handled asynchronously to avoid blocking the main thread. Promise.all() solves the coordination problem: how to run several independent async operations concurrently and wait for all of them to complete before moving on.

The mental model

Think of Promise.all() as a team relay race coordinator. The race isn't over until every runner finishes their leg. If any single runner drops out, the entire team is disqualified immediately, regardless of how well the others performed. The final result is the collection of all successful run times, in the order the runners were listed, not the order they finished.

How it works

You pass Promise.all() an iterable (usually an array) of promises. It returns a single new promise. This new promise waits for all input promises to fulfill. If they all succeed, it fulfills with an array containing their resolved values. The order of this result array matches the order of the promises in your input array, not the order in which they completed. If any of the input promises reject, the main promise immediately rejects with the reason of that first failed promise.

When to use it

Use Promise.all() when you have multiple asynchronous tasks that are independent of each other but whose results are all required to proceed. A common scenario is fetching data from several different API endpoints to populate a single view in a web application. It's a great way to parallelize I/O-bound operations.

When not to use it

Avoid Promise.all() when the failure of one task should not prevent you from processing the results of others. If you need to know the outcome of every promise, whether it succeeded or failed, use Promise.allSettled() instead. The fail-fast behavior makes it unsuitable for "best-effort" scenarios where partial success is acceptable.

One canonical example

To fetch a user's profile and their recent posts simultaneously, you can do:

const userPromise = fetch('/api/user/1');
const postsPromise = fetch('/api/user/1/posts');

Promise.all([userPromise, postsPromise])
.then(async ([userResponse, postsResponse]) => {
const user = await userResponse.json();
const posts = await postsResponse.json();
console.log('Successfully fetched:', user, posts);
})
.catch(error => console.error('One of the fetches failed:', error));

This code waits for both network requests. If either fails, the .catch block runs immediately. If both succeed, we get an array of Response objects to process.