JavaScript Promise all() method takes an iterable of promises as input and returns a single Promise that resolves when all of the promises in the iterable have resolved, or rejects as soon as one of the promises in the iterable rejects.
Syntax
Promise.all(iterable);
Parameters
iterable: It is an Object such as an Array.
Return Value
Returns one of the following:
- An already resolved Promise if the passed iterable is empty.
- An asynchronously resolved Promise if the passed iterable contains no promises.
- A pending Promise in all other cases. This promise is resolved or rejected asynchronously (as soon as the stack is empty) when all the promises in the iterable have been resolved, or if any of the promises are rejected. The returned values will be in the order of the Promises passed, regardless of their completion order
Visual Representation
Example 1: How to Use Promise.all() Method
let promise1 = Promise.resolve(7);
let promise2 = 14;
let promise3 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('AppDividend');
}, 500);
});
Promise.all([promise1, promise2, promise3]).then(values => {
console.log(values);
});
Output
[7, 14, "AppDividend"]
Example 2: One of the promises fails
let promise1 = Promise.resolve(7);
let promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error('rejection'));
}, 500);
});
let promise3 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('AppDividend');
}, 500);
});
Promise.all([promise1, promise2, promise3])
.then(values => {
console.log('All Promises Resolved:', values);
})
.catch(error => {
console.error('A Promise Rejected:', error);
});
Output
A Promise Rejected: Error: rejection
We get an error like this because we have rejected one Promise, and the final Promise will also be rejected.
It is possible to change this practice by handling possible rejections.
let promise1 = Promise.resolve(7);
let promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error('rejection'));
}, 500);
});
let promise3 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('AppDividend');
}, 500);
});
Promise.all([
promise1.catch(error => { return error; }),
promise2.catch(error => { return error; }),
promise3.catch(error => { return error; }),
]).then(values => {
console.log(values[0]);
console.log(values[1]);
console.log(values[2]);
});
Output
7
Error: rejection
AppDividend
Browser Compatibility
- Google Chrome 32 and above
- Edge 12 and above
- Firefox 29 and above
- Opera 19 and above
- Safari 8 and above