我們將在本教程中了解 Promise.race() 方法。正如race() 方法的名稱所暗示的那樣，作為race() 方法的參數傳遞的promise 會執行競爭。
因此，無論哪個 Promise 先被解析，都只會由 race() 方法執行，其他 Promise 永遠不會被執行。
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 區塊。
在此範例中，我們建立了多個 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>
在此範例中，我們採用了不同的 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中文網其他相關文章！
