Skip to content
Related Articles

Related Articles

Explain Promise.all with async-await in JavaScript

Improve Article
Save Article
Like Article
  • Difficulty Level : Medium
  • Last Updated : 18 Apr, 2022

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 about 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 wishes to print the output in the form of array, then that user may run any loop or method over an array and print the values in console (Promise.all() returns an iterable object which is an array itself.).
  • One thing which is associated with the Promise.all() is that, if one of the promise is returning the output as rejected, it wouldn’t be giving the output of the other successfully executed promises.

Syntax: Following is the syntax which we could use in order to execute Promise.all() method for several promises:

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

Example: Following is the pseudo code (not runnable one) 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 which we use to illustrate a particular function or method as 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: Following is the syntax which we could use in order to execute an asynchronous method async-await:

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 creating two promises inside two different functions (or methods) and in another function we will accessing them using Promise.all() along with making that function as 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' ]

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!