Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to execute multiple promises sequentially in JavaScript ?

  • Difficulty Level : Easy
  • Last Updated : 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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!