Difference between JavaScript Promise.all and Promise.allSettled

Difference between JavaScript Promise.all and Promise.allSettled:

We have to use multiple Promises in many places in JavaScript. Promise.all and Promise.allSettled are both important methods to handle multiple promises in JavaScript. Both methods accepts an array of promises. But there is a difference between these two.

In this post, I will show you how to use Promise.all and Promise.allSettled in JavaScript and the differences between these two methods.

Promise.all:

The Promise.all method takes an iterable of promises as its parameter. It returns a single Promise.

The returned promise resolves to an array of the result of the promises sent to this method. The result promise will resolve only if all of the promises are resolved. If the iterable is empty, it will resolve. It will reject if any of the input promise rejects.

It throws the same rejection error.

Let’s take a look at the below program:

let p1 = Promise.resolve(1);
let p2 = new Promise((resolve, reject) => {
    setTimeout(resolve, 200, 'resolved-2');
});
let p3 = new Promise((resolve, reject) => {
    setTimeout(resolve, 300, 'resolved-3');
});

Promise.all([p1, p2, p3]).then((values) => {
    console.log(values);
});

Here, we created three promises p1, p2 and p3. The Promise.all takes all of these promises and we are printing the result of the promise resolve result.

It will print:

[ 1, 'resolved-2', 'resolved-3' ]

Let’s take it with an empty array:

Promise.all([]).then((values) => {
    console.log(values);
});

It will print:

[]

If one of the promise rejects, it will reject the final Promise.all method.

let p1 = Promise.resolve(1);
let p2 = Promise.reject("Rejecting p2 !!");
let p3 = new Promise((resolve, reject) => {
    setTimeout(resolve, 300, 'resolved-3');
});

Promise.all([p1, p2, p3]).then((values) => {
    console.log(values);
}).catch(error => console.log(error));

It will print:

Rejecting p2 !!

Because, p2 is rejected, the Promise.all got rejected.

Promise.allSettled:

Promise.allSettled method is bit different than Promise.all. The parameter of Promise.allSettled is similar to Promise.all, i.e. we need to pass an iterable or an array holding promises. This method returns a promise that resolves after all of the promises we passed to this method either fulfilled or rejected. The best part is that it will return an array of objects with the result of each promise.

If you want to know the result of each promise, you can use this method. But, if you want to reject the result promise if any of the promise got rejected, you can use Promise.all.

Let’s try this with an example:

let p1 = Promise.resolve(1);
let p2 = Promise.reject("Rejecting p2 !!");
let p3 = new Promise((resolve, reject) => {
    setTimeout(resolve, 300, 'resolved-3');
});

Promise.allSettled([p1, p2, p3]).then((values) => {
    console.log(values);
}).catch(error => console.log(error));

It will print:

[
  { status: 'fulfilled', value: 1 },
  { status: 'rejected', reason: 'Rejecting p2 !!' },
  { status: 'fulfilled', value: 'resolved-3' }
]

As you can see here, it returned an array of objects holding the result of each promise we passed in the array.

CodeVsColor

Difference between JavaScript Promise.all and Promise.allSettled