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

Front End Technology Javascript Web Development

In JavaScript, there is a method called "Promise.all" that allows you to run an array of promises in parallel. However, sometimes you may want to run your promises in series instead. This can be useful if you want to make sure that each promise is executed one after the other, or if you need to use the result of one promise in the execution of the next promise.

There are a few different ways that you can run an array of promises in series in JavaScript. In this article, we'll take a look at a few of them.

Promise.prototype.then()

One way to run an array of promises in series is to chain them together using the then() method. This method takes a function as its input, which will be executed after the promise is fulfilled.

Example

<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result1"></div>
   <div id="result2"></div>
   <div id="result3"></div>
   <script>
      Promise.resolve(1) .then(result => {
         document.getElementById("result1").innerHTML = result
         return Promise.resolve(2);
      }) .then(result => {
          document.getElementById("result2").innerHTML = result
         return Promise.resolve(3);
      }) .then(result => {
          document.getElementById("result3").innerHTML = result
      });  
   </script>
</body>
</html>

As you can see, we're using the then() method to chain together three promises. The first promise resolves to the value 1, which is displayed. The second promise resolves to the value 2, which is also displayed. And finally, the third promise resolves to the value 3, which is displayed.

Because the "then" method returns a promise, we can chain promises together in this way to create a series.

for-await-of

Another way to run an array of promises in series is to use the "for-await-of" loop. This loop allows you to use the await keyword inside of a for loop. The await keyword pauses the execution of the code until the promise is fulfilled.

Example

Here's an example −

<html>
<head>
   <title>Example- for-await-of</title>
</head>
<body>
   <script>
      async function runPromisesInSeries() {
         for await (const promise of [
            Promise.resolve(1),
            Promise.resolve(2),
            Promise.resolve(3),
         ]) {
               const result = await promise;
               document.write(result);
               document.write("<br>")
            }
         }
      runPromisesInSeries();
   </script>
</body>
</html>

In this example, we have an async function that contains a "for-await-of" loop. This loop iterates over an array of promises. For each promise in the array, we await the promise to be fulfilled. Once the promise is fulfilled, the value is displayed.

Using a library

If you need more functionality than what's provided by the native Promise API, you can use a library like Bluebird or Q. These libraries provide additional methods for working with promises.

For example, Bluebird provides a "map" method that allows you to map an array of values to an array of promises, and then wait for all of the promises to be fulfilled −

const Promise = require('bluebird');

Promise.map([1, 2, 3], x => {
   return Promise.resolve(x * 2);
}).then(results => {
   console.log(results); // [2, 4, 6]
});

Conclusion

In this article, we've seen a few different ways that you can run an array of promises in series in JavaScript. We've seen how to use the "then" method to chain promises together, how to use the "for-await-of" loop, and how to use a library like Bluebird or Q.