How to execute multiple promises sequentially in JavaScript ?

13 Jan, 2022
In this article, we will try to understand how we could easily execute multiple promises in a sequential manner (one after the another) with several techniques or methods provided by JavaScript.
Let us first quickly understand how we may create a promise by using the following syntax provided by JavaScript.
Syntax: Following syntax could be used for the creation of promise in JavaScript.
let promise = new Promise((resolve, reject) => resolve(10))
By using the above syntax we could create our promise successfully by either resolving it (having the resolved state) or rejecting it (having the rejected state).
Example: In this example, we will create a simple promise just to see how it works or how it gets executed.
Javascript
<script>    let promise = new Promise((resolve, reject) => {        resolve("GeeksforGeeks");    });    promise.then(result => console.log(result));</script>
Output:
GeeksforGeeks
Now that we have understood how to create a promise let us quickly see and visualize how we could execute multiple promises in a sequential manner.
Following are the certain approaches through which we could easily execute multiple promises in a sequential manner.
Approach 1:
In this approach, we will use Promise.all() method which takes all promises in a single array as its input.
As a result, this method executes all the promises in itself and returns a new single promise in which the values of all the other promises are combined together.
The values in the newly returned single promise will be in a sequential manner (that it one after the another).
The output which will be returned is in the form of an array that will consist of the values which are either resolved or rejected by the other two promises.
Example: Let us see the following code which illustrates the above approach:
Javascript
<script>    let promise1 = new Promise((resolve, reject) => {        resolve("Hello! ");    });      let promise2 = new Promise((resolve, reject) => {        setTimeout(() => {            resolve("GeeksforGeeks");        }, 1000);    });      Promise.all([promise1, promise2])        .then((result) => console.log(result));</script>
Output:
[ 'Hello! ', 'GeeksforGeeks' ]
Approach 2:
In this approach, we will use Promise.allSettled() which will be executed in a quite similar manner as Promise.all() method executed by taking promises as input in the single array and executing them sequentially.
There is a slight difference which is that this Promise.allSettled() method returns an array of objects in which along with the state of each promise (either fulfilled or rejected), the value of each promise is also there.
Example: Let us see the following code which illustrates the above approach:
Javascript
<script>    let promise1 = new Promise((resolve, reject) => {        resolve("Hello! ");    });      let promise2 = new Promise((resolve, reject) => {        setTimeout(() => {            resolve("GeeksforGeeks");        }, 1000);    });      Promise.allSettled([promise1, promise2])        .then((result) => console.log(result));</script>
Output:
[
  { status: 'fulfilled', value: 'Hello! ' },
  { status: 'fulfilled', value: 'GeeksforGeeks' }
]
Approach 3:
In this approach, we will use for-of loop along with the async-await methods.
We will run the loop over the array of promises, further making an async function and thus await the result into the resultant promise along with the try-catch block and thus print the result over the browser’s console.
Example: Let us see the following code which illustrates the above approach:
Javascript
<script>    let promise1 = new Promise((resolve, reject) => {        resolve("Hello! ");    });      let promise2 = new Promise((resolve, reject) => {        setTimeout(() => {            resolve("GeeksforGeeks");        }, 1000);    });      let promiseExecution = async () => {        for (let promise of [promise1, promise2]) {            try {                const message = await promise;                console.log(message);            } catch (error) {                console.log(error.message);            }        }    };    promiseExecution();</script>
Output:
Hello! 
GeeksforGeeks
JavaScript-Questions
Picked
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
Roadmap to Learn JavaScript For Beginners
JavaScript | Promises
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?