首頁 > 文章 > web前端 > 如何在 JavaScript 中連續運行給定的 Promise 陣列？

如何在 JavaScript 中連續運行給定的 Promise 陣列？

PHPz轉載: 2023-09-24 13:25:02715瀏覽

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

在 JavaScript 中，有一個名為「Promise.all」的方法，它允許您並行運行一系列 Promise。然而，有時您可能想連續履行您的承諾。如果您想確保每個 Promise 依序執行，或者需要在執行下一個 Promise 時使用一個 Promise 的結果，這會很有用。

有一些您可以透過不同的方式在 JavaScript 中連續執行一系列 Promise。在本文中，我們將介紹其中的一些。

Promise.prototype.then()

串聯運行 Promise 陣列的一種方法是連結使用 then() 方法將它們組合在一起。此方法接受一個函數作為輸入，該函數將在 Promise 完成後執行。

範例

<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>

如您所見，我們使用 then() 方法將三個 Promise 連結在一起。第一個 Promise 解析為值 1，並顯示該值。第二個 Promise 解析為值 2，該值也被顯示。最後，第三個 Promise 解析為值 3，並顯示該值。

因為「then」方法傳回一個 Promise，所以我們可以透過這種方式將 Promise 連結在一起以建立一個系列。

for-await-of

串聯運行 Promise 陣列的另一種方法是使用「for-await-of」迴圈。此迴圈可讓您在 for 迴圈內使用await 關鍵字。 wait 關鍵字暫停程式碼的執行，直到承諾得到履行。

範例

這是一個範例 -

<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>

在此範例中，我們有一個包含「for-await-of」循環的非同步函數。該循環迭代一系列 Promise。對於數組中的每個承諾，我們等待承諾得到履行。一旦履行了 Promise，就會顯示該值。

使用函式庫

如果您需要比本機 Promise API 提供的更多功能，您可以使用 Bluebird 等函式庫或問：這些函式庫提供了使用 Promise 的附加方法。

例如，Bluebird 提供了一種「映射」方法，可讓您將值數組對應到Promise 數組，然後等待所有值要兌現的承諾-

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]
});

結論

############################################################################################################### #在本文中，我們了解了在JavaScript 中連續執行一系列Promise 的幾種不同方法。我們已經了解如何使用「then」方法將 Promise 連結在一起，如何使用「for-await-of」循環，以及如何使用 Bluebird 或 Q 等函式庫。 ###

以上是如何在 JavaScript 中連續運行給定的 Promise 陣列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript for 循环 promise 异步 prototype

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：JavaScript 中 location.host 和 location.hostname 之間的差異下一篇：JavaScript 中 location.host 和 location.hostname 之間的差異

看更多