How to Use Promise.all in JavaScript: Simple Guide
Use
Promise.all to run multiple promises at the same time and wait until all of them finish. It takes an array of promises and returns a new promise that resolves with an array of results when all input promises succeed, or rejects if any promise fails.Syntax
Promise.all accepts an array of promises and returns a single promise. This returned promise resolves when all input promises resolve, or rejects if any input promise rejects.
Promise.all(iterable): iterable is usually an array of promises.- Returns a promise that resolves to an array of resolved values in the same order.
javascript
Promise.all([promise1, promise2, promise3]) .then(results => { // results is an array of resolved values }) .catch(error => { // error is the first rejection reason });
Example
This example shows how Promise.all runs three promises in parallel and waits for all to finish. It then logs all results together.
javascript
const promise1 = new Promise(resolve => setTimeout(() => resolve('First'), 1000)); const promise2 = new Promise(resolve => setTimeout(() => resolve('Second'), 2000)); const promise3 = new Promise(resolve => setTimeout(() => resolve('Third'), 1500)); Promise.all([promise1, promise2, promise3]) .then(results => { console.log('All done:', results); }) .catch(error => { console.error('One failed:', error); });
Output
All done: [ 'First', 'Second', 'Third' ]
Common Pitfalls
Common mistakes when using Promise.all include:
- Passing non-promise values without wrapping them in
Promise.resolve()(thoughPromise.allhandles this automatically). - Not handling rejection: if any promise rejects,
Promise.allrejects immediately, so use.catch()to handle errors. - Expecting results in order of completion instead of order of promises passed.
javascript
const p1 = Promise.resolve('A'); const p2 = Promise.reject(new Error('Error!')); const p3 = Promise.resolve('C'); // Wrong: no catch, will cause unhandled rejection Promise.all([p1, p2, p3]) .then(results => console.log(results)); // Right: handle rejection Promise.all([p1, p2, p3]) .then(results => console.log(results)) .catch(error => console.error('Caught error:', error));
Output
Caught error: Error!
Quick Reference
| Feature | Description |
|---|---|
| Input | An iterable (usually array) of promises or values |
| Output | A promise that resolves to an array of results or rejects on first error |
| Order | Results keep the same order as input promises |
| Error Handling | Rejects immediately if any promise rejects |
| Use Case | Run multiple async tasks in parallel and wait for all |
Key Takeaways
Promise.all runs multiple promises in parallel and waits for all to finish.
It resolves with an array of results in the same order as the input promises.
If any promise rejects, Promise.all rejects immediately with that error.
Always handle errors with .catch() to avoid unhandled rejections.
You can pass non-promise values; they are treated as resolved promises.