在编写前端代码时，我们经常会遇到需要同时调用多个异步方法的情况。而在多个异步方法同时执行时，我们很可能会遇到 Promise 竞速的问题，即多个 Promise 对象同时执行，但我们只需要获取其中最先返回的结果。
在 ES6 中，我们可以使用 Promise.race 方法来解决这个问题。而在 ES11 中，Promise.race 方法得到了更加完善的更新。
Promise.race 方法
在 ES6 中，Promise.race 方法接受一个可迭代的参数，并返回一个新的 Promise 对象。这个新的 Promise 对象将在传入的多个 Promise 对象中任意一个对象解决时被解决。
以下是一个示例代码：
Promise.race([
fetch('/data1'),
new Promise(resolve => setTimeout(resolve, 5000)),
fetch('/data2')
])
.then(response => console.log(response))
.catch(error => console.error(error));在上面的代码中，我们传入了三个 Promise 对象作为参数。当这三个 Promise 对象中的任意一个对象解决时，新的 Promise 对象将被解决，从而使得我们可以获得其中最先返回的结果。
ES11 中的 Promise.race 方法
在 ES11 中，Promise.race 方法得到了更加完善的更新。现在，我们可以使用 Promise.any 方法来选择其中任意一个解决的 Promise 对象，返回一个新的 Promise 对象。
以下是一个示例代码：
Promise.any([
fetch('/data1'),
new Promise(resolve => setTimeout(resolve, 5000)),
fetch('/data2')
])
.then(response => console.log(response))
.catch(error => console.error(error));在上面的代码中，我们同样传入了三个 Promise 对象作为参数，且其中一个 Promise 对象解决时，新的 Promise 对象将被解决。与 Promise.race 方法不同的是，ES11 的 Promise.any 方法会选择其中第一个成功的 Promise 对象，而不是任意一个 Promise 对象。
总结
在前端开发中，我们经常会遇到需要同时调用多个异步方法的情况，但这也很可能引发 Promise 竞速的问题。通过使用 ES6 中的 Promise.race 方法以及 ES11 中的 Promise.any 方法，我们可以很方便地解决这个问题。
同时，需要注意的是，在真实的业务场景中，我们需要根据需求来选择是否需要使用 Promise.race 或 Promise.any。我们需要理解这两个方法的区别，以便在应用中选择适合的方法来解决具体问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64928d4648841e98940558a9