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() 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 which 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: The following is the syntax that 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 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: The following is the syntax that 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 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 promiselet firstPromise = () => { return new Promise((resolve, reject) => { resolve("Hello! "); });};// Defining our second promiselet secondPromise = () => { return new Promise((resolve, reject) => { resolve("Hi! "); });};// Async function to perform execution of all promiselet promiseExecution = async () => { let promise = await Promise.all([ firstPromise(), secondPromise(), ]); console.log(promise);};// Function callpromiseExecution(); |
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 promiselet firstPromise = () => { return new Promise((resolve, reject) => { resolve("Hello! "); });};// Defined our second promiselet secondPromise = () => { return new Promise((resolve, reject) => { resolve("Hi! "); });};// Defined our third promiselet thirdPromise = () => { return new Promise((resolve, reject) => { return setTimeout(() => { resolve("neveropen"); }, 2000); });};// Async function to perform execution of all promiselet promiseExecution = async () => { let promise = await Promise.all([ firstPromise(), secondPromise(), thirdPromise(), ]); console.log(promise);};// Function callpromiseExecution(); |
Output:
[ 'Hello! ', 'Hi! ', 'neveropen' ]
