Differences between Promise.all() and Promise.allSettled() in JS?
Promise.all
will reject as soon as one of the Promises in the array rejects.
Promise.allSettled
will never reject - it will resolve once all Promises in the array have either rejected or resolved.
Their resolve values are different as well. Promise.all
will resolve to an array of each of the values that the Promises resolve to - eg [Promise.resolve(1), Promise.resolve(2)]
will turn into [1, 2]
. Promise.allSettled
will instead give you [{ status : 'fulfilled', value: 1 }, { status : 'fulfilled', value: 2 }]
.
Promise.all([Promise.resolve(1), Promise.resolve(2)])
.then(console.log);
Promise.allSettled([Promise.resolve(1), Promise.resolve(2)])
.then(console.log);
If one of the Promises rejects, the Promise.all
will reject with a value of the rejection, but Promise.allSettled
will resolve with an object of { status: 'rejected', reason: <error> }
at that place in the array.
Promise.all([Promise.reject(1), Promise.resolve(2)])
.catch((err) => {
console.log('err', err);
});
Promise.allSettled([Promise.reject(1), Promise.resolve(2)])
.then(console.log);
Promise.all: It resolves only when all promises passed to it ( as an array) resolves else it will reject with the first rejected promise error.
Promise.allSettled: This one will always get resolved with an array having info about resolved and rejected promises. Have a close look at following properties (status, value, reason ) of resulting array.
Example 1:
const pms1 = Promise.resolve(1);
// setTimeout(function, milliseconds, param1, param2, ...)
const pms2 = new Promise((resolve, reject) => {
setTimeout(resolve, 200, 2);
});
const pms3 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 3);
});
const pmsAry = [pms1, pms2, pms3];
Promise.all(pmsAry)
.then(resAry => console.log(resAry)) // resAry order is same as pmsAry order
.catch(error => console.log(error));
/*
* Note here we are not writing 'catch' because Promise.allSettled ALWAYS RESOLVES
* with array containing information about resolved or rejected promises
*/
Promise.allSettled(pmsAry)
.then(resAry => console.log(resAry)); // resAry order is same as pmsAry order
Output :
[1, 2, 3]
// Promise.all output ORDER doesn't depend on promise resolution time
[{ status: "fulfilled", value: 1 },
{ status: "fulfilled", value: 2 },
{ status: "fulfilled", value: 3 }]
// Promise.allSettled output ORDER doesn't depend on promise resolution time
Example 2:
const pms1 = Promise.resolve(1);
const pms2 = new Promise((resolve, reject) => {
setTimeout(reject, 200, '200ms Err');
});
const pms3 = new Promise((resolve, reject) => {
setTimeout(reject, 100, '100ms Err');
});
const pmsAry = [pms1, pms2, pms3];
Promise.all(pmsAry)
.then(resAry => console.log(resAry))
.catch(error => console.log(error));
Promise.allSettled(pmsAry)
.then(resAry => console.log(resAry));
Output :
100ms Err
/*
* Note: Here there are TWO promises which are getting REJECTED but output is
* ONLY ONE (i.e the one which is getting rejected FIRST)
*/
[{ status: "fulfilled", value: 1 }, // Note: value
{ status: "rejected", reason: "200ms Err" },
{ status: "rejected", reason: "100ms Err" }] // Note: reason
Promise.all : It returns a promise which resolves, when all promises from an array are resolved and gets rejected if one or more promises get rejected.
Promise.allSettled : It returns a promise which resolves when all the promises in the array are settled (rejected or resolved).
Note : Both of them take an iterable and return an array containing the fulfilled Promises.
When you want to make sure that the promise should all be resolved/success for the operation you are using then you need to use Promise.all
since it completes when it get resolved for each of the promise.
But when you just want to complete all the promises irrespective to whether they are resolved or rejected then use Promise.allSettled
.
Both of them execute promises in bulk but the subtle difference is the way they are handling the promise iterations.