Explain Promise.all with async-await in JavaScript

In JavaScript, Promise.all with async-await is used to handle multiple asynchronous operations concurrently. By combining Promise.all with await, you can wait for all promises to resolve or any to reject, ensuring that all asynchronous tasks are complete before proceeding with the next code execution step.

What is Promise.all()?

Promise.all is a JavaScript method that takes an array of promises and returns a single promise that resolves when all the promises resolve or rejects if any promise rejects, making it useful for running tasks concurrently.

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.

// 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.

// 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' ]

Conclusion

Using Promise.all with async-await allows you to efficiently manage multiple asynchronous tasks in JavaScript by running them concurrently. This combination not only improves code readability but also enhances performance by ensuring that all asynchronous operations complete before moving to the next step. Understanding and implementing these tools can significantly streamline complex asynchronous workflows in JavaScript applications.

amansingla

Follow

Improve

Article Tags :

• JavaScript
• Web Technologies
• JavaScript-Questions