数据结构
网络
关系数据库管理系统
操作系统
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+ 阅读量
