Promise.all() takes an array of promises and returns a single promise that fulfills when all input promises have been fulfilled, or rejects immediately if any of the input promises reject.
Basic Usage:
// resolve promise1
const promise1 = new Promise((resolve, reject) => {
setTimeout(resolve, 200, "King");
});
// resolve promise2
const promise2 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, "Queen");
});
// Notice that all promises supplied must resolve or an error is
// thrown and the promise will be handled in catch()
Promise.all([promise1, promise2]).then(
(fulfilled) => {
console.log(`All fulfilled: ${fulfilled.length}`);
console.log(fulfilled)
}
).catch(e => console.log(e));
// All fulfilled:
// [ 'King', 'Queen' ]
All Promises Must Resolve:
If any Promise in the chain is rejected, a Promise error is returned and will be handled with Promise.catch(). It’s important to get into a habit of providing a Promise.catch() to handle any rejected results.
// All promises are resolved successfully! An array with resolved results
// from each of the fulfilled promises is provided to the chained
// Promise.then(x => console.log(x)) method.
Promise.all([
Promise.resolve("Success 1"),
Promise.resolve("Success 2"),
Promise.resolve("Success 3")
]).then(results => {
console.log(results); // ['Success 1', 'Success 2', 'Success 3']
});
Handling Rejections Gracefully:
// One promise rejects - all others are ignored
const promise1 = new Promise((resolve, reject) => {
setTimeout(resolve, 200, "King");
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(reject, 100, "Queen rejected!");
});
Promise.all([promise1, promise2])
.then((fulfilled) => {
// This will NOT execute
console.log("All fulfilled");
})
.catch(e => {
console.log("Error:", e); // "Error: Queen rejected!"
});
// Output: "Error: Queen rejected!"
Order of Preservation:
A results array is returned ordered in the sequence in which the promise fulfills in the list. All promises are executed in parallel. The first promise to resolve will be the first element of the return array. Notice in this example the first promise in the supplied promises array is actually the last promise in the return array of resolved promises.
// Order of Preservation
// Results maintain the same order as input promises
Promise.all([
new Promise((resolve, reject) => {
setTimeout(resolve, 100, "First");
}),
Promise.resolve("Second"),
Promise.resolve("Third")
])
.then(results => {
console.log(results[0]); // "Second"
console.log(results[1]); // "Third"
console.log(results[2]); // "First"
});
Immediate Rejection:
Notice slowResolve below continues executing but the results are ignored. It’s handled in Promise.catch()
// If any promise rejects, Promise.all immediately rejects
// without waiting for other promises
const fastResolve = new Promise(resolve =>
setTimeout(resolve, 100, "Fast")
);
const slowResolve = new Promise(resolve =>
setTimeout(resolve, 500, "Slow")
);
const fastReject = new Promise((resolve, reject) =>
setTimeout(reject, 50, "Rejected!")
);
Promise.all([fastResolve, slowResolve, fastReject])
.then(results => {
// Never executes
console.log("Success:", results);
})
.catch(error => {
console.log("Caught:", error); // "Caught: Rejected!"
// Both fastResolve and slowResolve continue executing but its result are ignored
});
Always Include Proper Error Handling:
Promise.all([apiCall1(), apiCall2(), apiCall3()])
.then(([result1, result2, result3]) => {
// Process all results
console.log("All API calls succeeded");
})
.catch(error => {
console.error("One or more API calls failed:", error);
// Handle the error appropriately
});
Parallel Processing
It’s perfect for processing multiple API calls in parallel.
const userId = 123;
const api1 = new Promise(resolve => fetch(`/api/users/${userId}`));
const api2 = new Promise(
resolve => fetch(`/api/users/${userId}/posts`)
);
const api3 = new Promise(
resolve => fetch(`/api/users/${userId}/settings`)
);
Promise.all([
api1,
api2,
api2
])
.then(responses => Promise.all(responses.map(r => r.json())))
.then(([user, posts, settings]) => {
console.log("User profile, posts and settings loaded");
// Use all data
})
.catch(error => {
console.error(error);
});
Promise.all() Summary:
1. Promise.all() waits for all promises to resolve or any to reject
2. Order of results matches the input array order
3. Fast failure - rejects immediately on first rejection
4. Always use .catch() to handle potential rejections
5. Perfect for parallel operations that don't depend on each other
If you need different behavior (like waiting for all promises to settle regardless of outcome), checkout Promise.allSettled().