首頁 > 文章 > web前端 > 在 JavaScript 解釋 Promise.race() 和 async-await ？

在 JavaScript 解釋 Promise.race() 和 async-await ？

WBOY轉載: 2023-09-08 22:49:071436瀏覽

在 JavaScript 中解释 Promise.race() 和 async-await ？

我們將在本教程中了解 Promise.race() 方法。正如race() 方法的名稱所暗示的那樣，作為race() 方法的參數傳遞的promise 會執行競爭。

因此，無論哪個 Promise 先被解析，都只會由 race() 方法執行，其他 Promise 永遠不會被執行。

Promise.race()

JavaScript 中的 Promise.race 方法可讓您等待一組 Promise 中的第一個被履行或拒絕，並處理發生的結果或錯誤。一旦其中一個輸入承諾被履行或拒絕，它就會傳回一個被履行或拒絕的承諾，以及該承諾的值或原因。

使用者可以依照下面的語法使用promise.race()方法來執行第一個已結算的promise。

Promise.race(iterable).then((response) => {
   // handle response
});

在上面的語法中，Promise.race()方法將iterable作為第一個參數，我們可以在「then」區塊內處理成功執行的promise的回應。

這裡iterable採用可迭代對象，例如一組承諾來執行其中的任何承諾，首先解決。

文法

以下是如何在 JavaScript 中將 Promise.race 方法與 async-await 結合使用的語法：

async function example() {
   try {
      const result = await Promise.race([promise1, promise2, ...]);
   } catch (error) {
      // handle error
   }
}

這裡，promise1、promise2等等是你想要等待的promise。 Promise.race 方法傳回已解決或拒絕的 Promise，其中包含要解決或拒絕的第一個輸入 Promise 的值或原因。

非同步函數範例使用 try/catch 語句來處理錯誤情況，其中如果任何輸入承諾被拒絕，則執行 catch 區塊。

範例 1

在此範例中，我們建立了多個 Promise，並在 Promise 內設定計時器來解決或拒絕它們。我們已將 Promise 陣列作為 race() 方法的參數傳遞。

輸出顯示 race() 方法執行被拒絕的 Promise，因為它沒有計時器。因此，race() 方法執行第一個 Promise，即使被拒絕或解決，該 Promise 也會提前實作。

<html>
<body>
   <h2>Using the Promise.race() </i> Method </h2>
   <div id="output"></div>
   <script>
      let promise_1 = new Promise((res, rej) => {
         setTimeout(() => {
            res("Resolved promise with time of 0 milliseconds");
         }, 1000);
      });
      let promise_2 = new Promise((res, rej) =>
      rej("This promise is rejected!")
      );
      let promise_3 = new Promise((res, rej) => {
         setTimeout(() => {
            res("Resolved promise with time of 2000 milliseconds");
         }, 2000);
      });
      Promise.race([promise_1, promise_2, promise_3]).then(
         (response) => {
            document.getElementById("output").innerHTML +=
            "Promise resolved successfully.";
         },
         (error) => {
            document.getElementById("output").innerHTML += "Promise rejected";
         }
      );
   </script>
</body>
</html>

範例 2

在此範例中，我們採用了不同的 API 並使用 fetch 方法做出了承諾。我們有一系列名為 requests 的 Promise。

我們使用 race() 方法來解析所有請求，無論哪個 Promise 會先解析，我們都會在「then」區塊中列印 URL。

<html>
<body>
   <h2>Using Promise.race() Method with async-await</h2>
   <div id = "output"> </div>
   <button onclick = "executeRace()"> Fetch data from early promise </button>
   <script>
      async function executeRace() {
         // array of different promises
         const requests = [
            fetch("https://api.publicapis.org/entries"),
            fetch("https://catfact.ninja/fact"),
            fetch("https://api.coindesk.com/v1/bpi/currentprice.json"),
         ];
         // resolving the promises using the race() method
         const res = await Promise.race(requests);
         document.getElementById("output").innerHTML +=
         "The first promise resolve is " + res.url;
      }
   </script>
</body>
</html>

當使用者需要使用第一個已解決的 Promise 的回應時，即使被拒絕或已解決，也可以使用 race() 方法。如果使用者需要使用第一個成功解析的 Promise 的結果，則應該使用 Promise.any() 方法。

以上是在 JavaScript 解釋 Promise.race() 和 async-await ？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript try catch 对象 promise 异步

陳述：

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

上一篇：列出React Native重要的核心元件下一篇：列出React Native重要的核心元件

看更多