How to run a given array of promises in series in JavaScript ?

23 Apr, 2021
Given an array of Promises, we have to run that in a series. To do this task, we can use then(), to run the next promise, after completion of a promise.
Approach: The then() method returns a Promise, which helps us to chain promises/methods. The Promise.resolve() method executes the first callback, and when this promise is fulfilled, then it passes to the next function callback1, and it goes on until all the promises are fulfilled. In this way, we can run all the Promises in series.
Syntax:
Promise.resolve( callback0 )
.then( callback1 )
.then( callback2 )
.then( callback3 )...    
Example 1: In this example, we will be executing 3 promises by chaining each of them with the then() method.
HTML
<html><body>  <h1 style="color: green;">    GeeksforGeeks  </h1>  <b>Promises</b>    <script>    // Define an asynchronous function,    // results in returning a promise    async function task(url) {      console.log(url + " will be fetched now")        return fetch(url);    }      // Declaring an array of URLs    let arr = [      "https://www.google.com",      "https://www.facebook.com",      "https://www.twitter.com"    ];      // Resolving the first task    Promise.resolve(() => {      return task(arr[0]);    })      // Resolving the second task      .then(() => {        return task(arr[1]);      })      // Resolving the third task      .then(() => {        return task(arr[2]);      });  </script></body></html>
Output:
https://www.facebook.com will be fetched now
https://www.twitter.com will be fetched now
The above approach is not feasible if there are a lot more promises in the array. Chaining of the function would get very tiring and will make the code lengthy. We can use the forEach() array function to execute the promises by storing the results in a variable and updating that variable at every promise. This will automatically go through all the promises and one can prevent repeatedly writing then() statements.
Example 2: In this example, we will be executing multiple promises by using the forEach() method.
HTML
<html><body>  <h1 style="color: green;">      GeeksforGeeks  </h1>  <b>Promises</b>  <script>      // Define an asynchronous function    async function task(url) {      return fetch(url);    }      // Define array that has to be processed    // by the asynchronous function    let arr = [      "https://www.google.com",      "https://www.facebook.com",      "https://www.twitter.com",      "https://www.youtube.com",      "https://www.netflix.com",    ];      // Declare a Promise using its resolve constructor    let promise = Promise.resolve();      // Use the forEach function to evaluate    // the promises in series          // The value of    // p would be the result    // of previous promise    arr.forEach((url, index) => {      promise = promise.then(() => {          let para = document.createElement("p");        para.innerText =           "The async request of " + url +          " has been resolved";          document.body.appendChild(para);          return task(url);      });    });  </script></body></html>
Output:
JavaScript-Methods
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 ?