search

Home  >  Article  >  Web Front-end  >  How to run a given array of Promises continuously in JavaScript?

How to run a given array of Promises continuously in JavaScript?

PHPz
PHPzforward
2023-09-24 13:25:02733browse

如何在 JavaScript 中连续运行给定的 Promise 数组？

In JavaScript, there is a method called "Promise.all" that allows you to run a series of Promises in parallel. However, there may be times when you want to keep fulfilling your commitments. This is useful if you want to ensure that each Promise is executed in sequence, or if you need to use the result of one Promise when executing the next Promise.

There are a few different ways you can run a series of Promises back-to-back in JavaScript. In this article, we will introduce some of them.

Promise.prototype.then()

One way to run arrays of Promise in series is to chain them together using the then() method. This method accepts as input a function that will be executed after the Promise completes.

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 chain three Promises together using the then() method. The first Promise resolves to the value 1 and displays that value. The second Promise resolves to the value 2, which is also displayed. Finally, the third Promise resolves to the value 3 and displays that value.

Because the "then" method returns a Promise, we can chain Promises together this way to create a series.

for-await-of

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

Example

This is 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 containing a "for-await-of" loop. This loop iterates over a series of Promises. For each promise in the array, we wait for the promise to be fulfilled. Once the Promise is fulfilled, the value is displayed.

Using Libraries

If you need more functionality than the native Promise API provides, you can use libraries such as Bluebird or Q: These libraries provide additional methods for working with Promise.

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 values ​​to be fulfilled -

const Promise = require(&#39;bluebird&#39;);

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

Conclusion

In this article, we looked at a few different ways to run a series of Promises continuously in JavaScript. We've seen how to chain Promises together using the "then" method, how to use "for-await-of" loops, and how to use libraries like Bluebird or Q.

The above is the detailed content of How to run a given array of Promises continuously in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript for 循环 promise 异步 prototype
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Difference between location.host and location.hostname in JavaScriptNext article：Difference between location.host and location.hostname in JavaScript

Related articles

See more