Explain Promise.all with async-await in JavaScript

In this article, we will try to understand how we could use Promise.all() along with the async-await using certain predefined syntax with ease in JavaScript. Before we directly jump into our defined task, let us first understand quickly in brief the basics associated with the Promise.all() and async-await.

Promise.all()

• Promise.all() is a method that combines all the user-defined promises and returns a single promise in the form of an array in which the result is the sequential combination of all the promises.
• If any user doesn’t wish to print the output in the form of an array, then that user may run any loop or method over an array and print the values in the console (Promise.all() returns an iterable object which is an array itself.).
• One thing that is associated with the Promise.all() is that, if one of the promises is returning the output as rejected, it wouldn’t be giving the output of the other successfully executed promises.

Syntax:

Promise.all([ first_promise , second_promise, .......])

Example: Following is the pseudo-code which will help you to understand more about Promise.all().

let promise1 = new Promise(()=> resolve(10));
let promise2 = new Promise(()=> resolve(20));
let final_promise = Promise.all([promise1, promise2]);

Async-await

• Async-await are the two keywords that we use to illustrate a particular function or method as an asynchronous data acceptor.
• Using async-await keywords we may easily show and capture the asynchronous, promise-based behavior in a very much cleaner style.

Syntax:

let method = async () => {
    let result = await (value);
    .....
}

Now that we have understood in brief about Promise.all() and async-await let us now jump into our task of implementing Promise.all() with async-await.

Example 1: In this example, we will create two promises inside two different functions (or methods) and in another function we will access them using Promise.all() along with making that function async and promise resulting fetching will be done along with the await keyword.

Javascript

// Defining our first promise
let firstPromise = () => {
    return new Promise((resolve, reject) => {
        resolve("Hello! ");
    });
};

// Defining our second promise
let secondPromise = () => {
    return new Promise((resolve, reject) => {
        resolve("Hi! ");
    });
};

// Async function to perform execution of all promise
let promiseExecution = async () => {
    let promise = await Promise.all([
        firstPromise(),
        secondPromise(),
    ]);
    console.log(promise);
};

// Function call
promiseExecution();

Output:

['Hello! ', 'Hi! ']

Example 2: In this example too we will create two simple promises and one promise in which we will be using a timer function (setTimeout) inside three different methods and one separate method for promises execution.

Javascript

// Defined our first promise
let firstPromise = () => {
    return new Promise((resolve, reject) => {
        resolve("Hello! ");
    });
};

// Defined our second promise
let secondPromise = () => {
    return new Promise((resolve, reject) => {
        resolve("Hi! ");
    });
};

// Defined our third promise
let thirdPromise = () => {
    return new Promise((resolve, reject) => {
        return setTimeout(() => {
            resolve("GeeksforGeeks");
        }, 2000);
    });
};

// Async function to perform execution of all promise
let promiseExecution = async () => {
    let promise = await Promise.all([
        firstPromise(),
        secondPromise(),
        thirdPromise(),
    ]);
    console.log(promise);
};

// Function call
promiseExecution();

Output:

[ 'Hello! ', 'Hi! ', 'GeeksforGeeks' ]

Reference: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await#awaiting_a_promise.all