背景
在 JavaScript 中，异步编程是不可避免的。异步编程可以让代码不被阻塞，提高代码的执行效率。Promise 是一种流行的异步编程解决方案，它可以代替回调函数，使代码更易读、易维护。Promise 支持多个异步操作的并发执行，但是有时候我们需要在多个异步操作中只要一个完成就可以了。这时就需要使用 Promise.race 方法进行竞争式异步编程。
Promise.race 方法介绍
Promise.race 方法是 Promise 的一个静态方法，它接受一个 Promise 对象构成的数组作为参数，并返回一个 Promise 对象。Promise.race 方法会等待 Promise 对象数组中的其中一个 Promise 对象（无论是 resolve 还是 reject 状态）完成，然后返回该 Promise 对象的状态和值。
例如，如果一个 Promise 对象数组中有三个 Promise 对象，如下所示：
const promises = [
Promise.resolve('Promise 1 resolved'),
Promise.reject('Promise 2 rejected'),
Promise.resolve('Promise 3 resolved')
];则 Promise.race 方法会返回一个新的 Promise 对象，它会等待其中一个 Promise 对象完成，并将其状态和值作为返回值。如果第一个 Promise 对象状态为 resolved，则返回的 Promise 对象的状态为 resolved，并将第一个 Promise 对象的值作为返回值；如果第一个 Promise 对象状态为 rejected，则返回的 Promise 对象的状态为 rejected，并将第一个 Promise 对象的错误信息作为返回值。
使用 Promise.race 方法进行竞争式异步编程
使用 Promise.race 方法进行竞争式异步编程非常简单，只需要将多个 Promise 对象放入一个数组中，然后调用 Promise.race 方法即可。下面是一个示例，该示例模拟了两个异步操作，分别是向两个不同的服务器发送请求，并返回响应结果：
// javascriptcn.com 代码示例
const server1 = 'http://server1.com';
const server2 = 'http://server2.com';
const request1 = fetch(`${server1}/api/data`);
const request2 = fetch(`${server2}/api/data`);
Promise.race([request1, request2])
.then(response => {
console.log(`Response: ${response}`);
})
.catch(error => {
console.error(`Error: ${error}`);
});在上面的示例中，我们使用 fetch 方法向两个不同的服务器发送请求，并将返回的 Promise 对象放入一个数组中，然后调用 Promise.race 方法。
如果服务器 1 返回响应结果，那么 Promise.race 返回的 Promise 对象的状态为 resolved，其值为服务器 1 返回的响应结果。如果服务器 2 返回响应结果，那么 Promise.race 返回的 Promise 对象的状态为 resolved，其值为服务器 2 返回的响应结果。如果两个服务器都返回响应结果，那么 Promise.race 返回的 Promise 对象的状态和值与 Promise.all 方法类似。
总结
使用 Promise.race 方法进行竞争式异步编程非常简单，只需要将多个 Promise 对象放入一个数组中，然后调用 Promise.race 方法即可。通过竞争式异步编程，我们可以在多个异步操作中只等待一个操作完成即可，提高代码的执行效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6538f2ec7d4982a6eb22166d