Promise.
Waits for every promise to be fulfilled and returns an array of their results. Rejects at the first error.
- Returns
- A promise fulfilled with an array of results, or rejected with the first error.
Example
#const load = (name, ms) =>
new Promise((resolve) => {
setTimeout(() => {
console.log(`Done: ${name}`)
resolve(name)
}, ms)
})
const results = await Promise.all([load('profile', 300), load('courses', 100), load('badges', 200)])
console.log(results)Definition and usage
#The Promise.all() method takes an array (or another iterable) of promises and returns a single promise. That promise is fulfilled once all of them are fulfilled, and its value is an array of results in the order the promises were passed, regardless of which one finished first.
This lets independent operations run in parallel instead of one after another. Three requests that each take 300 ms will together take about 300 ms, not 900 ms.
If any promise is rejected, Promise.all() immediately rejects with that same error, and the results of the others are lost. The operations themselves aren’t interrupted, though. When you need the results of every operation, including the failed ones, use Promise.allSettled().
Syntax
#Promise.all(iterable)Parameters
#iterable
array of promises
The promises to combine. Plain values (not promises) end up in the result unchanged.
More examples
#const wait = (ms, value) => new Promise((resolve) => setTimeout(() => resolve(value), ms))
const fail = (ms, message) =>
new Promise((_, reject) => setTimeout(() => reject(new Error(message)), ms))
try {
await Promise.all([wait(300, 'profile'), fail(100, 'Failed to load courses')])
} catch (error) {
console.log(error.message)
}const wait = (ms, value) => new Promise((resolve) => setTimeout(() => resolve(value), ms))
const getPoints = (student) => wait(100, student.length * 10)
const students = ['Emma', 'Jack', 'Mia']
const points = await Promise.all(students.map(getPoints))
console.log(points)Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Combine
Promise.all()withmap()to run the same operation on many elements at once:await Promise.all(ids.map(loadUser)). - Don’t use
Promise.all()for operations that depend on each other. If the second step needs the result of the first, run them one after another. - When one operation failing shouldn’t ruin the rest, choose
Promise.allSettled()instead.
Related entries
#- Promise.all() vs Promise.allSettled()Promise.all() rejects at the first error and returns an array of results, while Promise.allSettled() waits for every promise and never rejects.
- Promise.allSettled()Waits for every promise to settle and returns a description of each result, both successes and errors.
- Promise.race()Returns a promise that settles the same way as the first promise in the list to settle, whether with success or an error.
- Promise.any()Returns the result of the first promise to be fulfilled. Rejects only once all of them have failed.
- awaitPauses an async function until a promise settles, then returns its value or throws its error.
- Array.prototype.map()Creates a new array with the results of calling a function for every element.
Spotted a mistake or missing an example? Write to us.