How does Promise.all() method differs from Promise.allSettled() method in JavaScript ?

In this article, we will first understand in brief the Promise.all() as well as Promise.allSettled() methods and then we will try to visualize how do they differ from each other through some theoretical as well as some coding examples.

Both Promise.all() and Promise.allSettled() methods are the methods of a Promise object (which is further a JavaScript object used to handle all the asynchronous operations) which are used to handle multiple promises results simultaneously. The input of both the methods is an array containing promises which further contains some data within them.

Let us now see these two methods syntaxes that are used in order to declare or instantiate them.

Syntax for Promise.all() method: Following syntax could be used for declaring this method.

Promise.all([promise_1 , promise_2,  ...]).then(
    // do something...
)

Syntax for Promise.allSettled() method: Following syntax could be used for declaring this method.

Promise.allSettled([promise_1 , promise_2,  ...]).then(
    // do something...
)

Now after analyzing their syntaxes, its high time to look into the fact that how do they actually differ from each other.

How do they differ from each other?

Following are some of the most important points which will help us to understand their difference (and that too with the help of some coding examples):-

1. In terms of rejecting promises:

• Promise.all() method rejects itself if any of the passed in promise input inside an array is rejected. That is, this method will only run if and only if all the promises are fulfilled or resolved successfully, otherwise, in the output, it would produce an error message.
• Promise.allSettled() method will not reject itself if any of the passed in promise input inside an array is rejected. That is, this method will irrespective of any promise be in the rejected state too.

2. In terms of their outputs:

• Promise.all() method returns an array as an output containing promise data inside several indexes.
• Promise.allSettled() method returns an array of objects and each of these objects further contains two properties further status and value.

Let us now some of the below mentioned coding examples in order to better understand the above-illustrated facts:-

Example 1: In this example, we will create two promises which are resolved successfully, and then we will pass them inside both of these methods and will visualize their result.

Javascript

<script>
    let first_promise = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Resolved First after 1 second");
        }, 1000);
    });

    let second_promise = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Resolved First after 2 seconds");
        }, 2000);
    });

    try {
        let result_1 = Promise.all(
            [first_promise, second_promise]);

        result_1.then((data) => console.log(data));

        let result_2 = Promise.allSettled(
            [first_promise, second_promise]);

        result_2.then((data) => console.log(data));
    } catch (error) {
        console.log(error);
    }
</script>

Output:

[ ‘Resolved First after 1 second’, ‘Resolved First after 2 seconds’ ]
[
  { status: ‘fulfilled’, value: ‘Resolved First after 1 second’ },
  { status: ‘fulfilled’, value: ‘Resolved First after 2 seconds’ }
]

Example 2: In this example, we will pass one rejected promise in both of these methods and further will visualize their outputs.

Javascript

<script>
    let rejected_promise = new Promise((resolve,
        reject) => reject("Rejected Promise...."));

    let first_promise = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Resolved First after 1 second");
        }, 1000);
    });

    let second_promise = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Resolved First after 2 seconds");
        }, 2000);
    });

    try {
        let result_1 = Promise.all([rejected_promise,
            first_promise, second_promise]);

        result_1.then((data) => console.log(data));

        let result_2 = Promise.allSettled([
            rejected_promise,
            first_promise,
            second_promise,
        ]);

        result_2.then((data) => console.log(data));
    } catch (error) {
        console.log(error);
    }
</script>

Output:

(node:10372) UnhandledPromiseRejectionWarning: Rejected Promise….
(Use `node –trace-warnings …` to show where the warning was created)
(node:10372) UnhandledPromiseRejectionWarning: Unhandled promise rejection. 
This error originated either by throwing inside of an async function without a catch block,
 or by rejecting a promise which was not handled with .catch(). To terminate the node process
 on unhandled promise rejection, use the CLI flag `–unhandled-rejections=strict` 
 see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:10372) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. 
In the future, promise rejections that are not handled will terminate the Node.js process 
with a non-zero exit code.
[
  { status: ‘rejected’, reason: ‘Rejected Promise….’ },
  { status: ‘fulfilled’, value: ‘Resolved First after 1 second’ },
  { status: ‘fulfilled’, value: ‘Resolved First after 2 seconds’ }
]