我們將在本教程中了解 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 ？的詳細內容，更多請關注www.92cms.cn其它相關文章！
