JavaScript 使用async-await解释Promise.race()方法

在本文中，我们将尝试理解如何使用async-await在JavaScript中实现Promise.race()方法，并通过一些编码示例和理论解释来帮助理解。让我们先快速了解一下如何实现Promise.race()方法。这个方法是最常用的promise方法之一，它声明无论哪个promise先达到终点，首先将被执行，而其余的promise将保持未执行状态。这实际上也可以理解为谁先达到比赛终点谁就赢得比赛，这里的概念也是相同的。

语法: 以下语法将帮助我们理解如何实现Promise.race()方法：

Promise.race([first_promise , second_promise, ...]).then(
    // do something......
)

让我们看一个以下所示的Promise.race()方法语法的示例，以更好地理解：

示例1： 在这个示例中，我们将一个接一个地创建三个带有计时器函数（setTimeout()方法）的promise。每个计时器函数都会在其说明的末尾指定不同的时间。然后，我们将使用Promise.race()方法，该方法会将这三个promise作为数组的形式输入，并根据自己的角色执行它们。

Javascript

let first_promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("GeeksforGeeks...!!");
    }, 1000);
});
 
let second_promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("JavaScript......!!");
    }, 2000);
});
 
let third_promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("TypeScript...!!");
    }, 3000);
});
 
let promise_array = [first_promise, second_promise, third_promise];
Promise.race(promise_array).then((result) => console.log(result));

输出：

GeeksforGeeks...!!

现在我们已经理解了如何执行Promise.race()方法，让我们看一个示例，帮助我们理解如何使用async-await关键字实现Promise.race()方法。

示例2: 像前面的示例一样，我们将创建三个带有不同计时器函数和不同超时时间的promise。然后，我们将创建一个具有前缀 async 的函数（或方法），并在其中使用另一个关键字 await 存储结果，然后使用then()方法显示结果。

Javascript

let first_promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("GeeksforGeeks...!!");
    }, 1000);
});
 
let second_promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("JavaScript......!!");
    }, 2000);
});
 
let third_promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("TypeScript...!!");
    }, 3000);
});
 
 
async function displayResult() {
    let promise_array = [first_promise, second_promise, third_promise];
    let result = await promise_array;
    Promise.race(promise_array).then((result) => console.log(result));
}
 
displayResult();

输出：

GeeksforGeeks...!!