Differences between Promise.all() and Promise.allSettled() in JS?

Question

I was reading the MDN's manual on Promise, and I found these two methods which seem similar to me:

• Promise.allSettled(iterable);
• Promise.all(iterable);

Both of them take an iterable and return an array containing the fulfilled Promises.

So, what is the difference between them?

Answer 1

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);

Answer 2

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