Explain Promise.allSettled() with async-await in JavaScript

In this article, we will try to understand how we may implement the Promise.allSettled() method with async-await in JavaScript with the help of certain coding examples as well as theoretical explanations. Let us first quickly understand about Promise.allSettled() method. This method is one of the most common methods available under the Promise object which executes once all the promises are either successfully resolved or rejected. The output of this method will be an array of multiple objects (depending upon as many promises created by the user), containing the value and status of each promise in each object itself. It is better to use Promise.all() if tasks are dependent on each other or if we want to reject a particular promise at any point.

Syntax:

The following syntax will be preferred to be used while implementing the Promise.allSettled() method:

Promise.allSettled([first_promise, second_promise, ...]).then(
    // do something...
)

Now after analyzing the above syntax, we will see the following example that will help us to understand the above syntax in a much better and more efficient manner:

Example 1: In this example, we will be creating three promises one after the another. Each promise will contain a different timer function having different timeouts. Afterward, we will use Promise.allSettled() method which will take all three promises as input in the form of an array (or an iterable object) and executes the result as per its role.

let first_promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("GeeksforGeeks...!!");
    }, 1000);
});

let second_promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("JavaScript......!!");
    }, 2000);
});

let third_promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("TypeScript...!!");
    }, 3000);
});

let promise_array = [first_promise, second_promise, third_promise];
Promise.allSettled(promise_array).then((result) => console.log(result));

Output:

[
  { status: 'fulfilled', value: 'GeeksforGeeks...!!' },
  { status: 'fulfilled', value: 'JavaScript......!!' },
  { status: 'fulfilled', value: 'TypeScript...!!' }
]

Now we have seen how to implement Promise.allSettled() method, let us see how to implement this method with the help of async-await keywords.

Example 2: In this example, we will be creating three promises one after the another (like we did in the previous example). Each promise will contain a different timer function having different timeouts. Then we will create a function with the prefixed async keyword in it and inside it, we will catch or store our result using await keyword. Afterward, we will use Promise.allSettled() method which will take all three promises as input in the form of an array (or an iterable object) and executes the result as per its role.

let first_promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("GeeksforGeeks...!!");
    }, 1000);
});

let second_promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("JavaScript......!!");
    }, 2000);
});

let third_promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("TypeScript...!!");
    }, 3000);
});

async function displayResult() {
  let promise_array = [first_promise, second_promise, third_promise];
  let result = await Promise.allSettled(promise_array);
  console.log(result);
}


displayResult();

Output:

[
  { status: 'fulfilled', value: 'GeeksforGeeks...!!' },
  { status: 'fulfilled', value: 'JavaScript......!!' },
  { status: 'fulfilled', value: 'TypeScript...!!' }
]

amansingla

Follow

Improve

Article Tags :

• JavaScript
• Web Technologies
• JavaScript-Methods
• JavaScript-Questions