資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究在 JavaScript 中使用 async-await 解釋 Promise.race()？
在本教程中，我們將學習 Promise.race() 方法。正如 race() 方法的名稱所暗示的那樣，作為 race() 方法引數傳遞的 Promise 會進行競賽以執行。
因此，無論哪個 Promise 最先被解決，都只會由 race() 方法執行，其他 Promise 永遠不會被執行。
Promise.race()
JavaScript 中的 Promise.race 方法允許您等待一組 Promise 中的第一個 Promise 完成或拒絕，並處理髮生的成功或錯誤結果。它返回一個 Promise，一旦輸入的 Promise 中的一個 Promise 完成或拒絕，就會被完成或拒絕，並帶有該 Promise 的值或原因。
使用者可以按照以下語法使用 promise.race() 方法來執行第一個解決的 Promise。
Promise.race(iterable).then((response) => {
// handle response
});
在上述語法中，Promise.race() 方法將可迭代物件作為第一個引數，我們可以在“then”塊中處理成功執行的 Promise 的響應。
這裡 iterable 獲取可迭代物件，例如要從中執行任何 Promise 的 Promise 陣列，該 Promise 最先解決。
語法
以下是您如何在 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 使用第一個解析或拒絕的輸入 Promise 的值或原因來解析或拒絕。
async 函式示例使用 try/catch 語句來處理錯誤情況，如果任何輸入的 Promise 被拒絕，則執行 catch 塊。
示例 1
在此示例中，我們建立了多個 Promise，並在 Promise 內部設定了計時器以解析或拒絕它們。我們將 Promise 陣列作為 race() 方法的引數傳遞。
輸出顯示 race() 方法執行被拒絕的 Promise，因為它沒有計時器。因此，即使被拒絕或解析，race() 方法也會執行第一個儘早完成的 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 方法建立了一個 Promise。我們有一個名為 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() 方法。
1K+ 閱讀量
