在前端开发中，我们经常需要发送多个并发请求，例如在加载页面时同时请求多个数据。然而，当其中一个请求耗时较长时，会影响其他请求的响应速度并导致用户等待时间过长。
ES6 的 Promise.race() 方法可以帮助我们在同时发起多个请求时，只处理最先完成的请求并取消其他请求，从而优化代码性能和用户体验。
Promise.race() 方法介绍
Promise.race() 方法可以接收一个包含多个 Promise 对象的数组作为参数，并在其中任意一个 Promise 对象状态变更时，返回一个新的 Promise 对象。该 Promise 对象的状态和值与第一个改变状态的 Promise 对象保持一致，而其他未被选中的 Promise 对象则会被取消。
例如：
Promise.race([
new Promise((resolve, reject) => setTimeout(() => resolve('A'), 1000)),
new Promise((resolve, reject) => setTimeout(() => resolve('B'), 500)),
new Promise((resolve, reject) => setTimeout(() => resolve('C'), 2000)),
]).then((result) => {
console.log(result); // 输出: 'B'
});在上面的示例中，Promise.race() 方法接收了包含三个 Promise 对象的数组作为参数，其中第二个 Promise 对象的定时器时间最短，将第一个改变状态的 Promise 对象选中并输出。
Promise.race() 方法在并发请求中的应用
在实际开发中，我们可以利用 Promise.race() 方法在多个并发请求中只处理最先完成的请求，从而提高页面响应速度和用户体验。
例如，在使用 axios 库发送多个请求时，我们可以使用 Promise.all() 方法同时发起多个请求，等待所有请求响应后再处理数据。但是，如果其中一个请求耗时较长，会导致其他请求的响应速度也变慢，影响用户体验。此时，可以使用 Promise.race() 方法只处理最先完成的请求并取消其他请求。
-- -------------------- ---- ------- ----- ----- - ----------------- ----- ---- - --------------------------- -------------------------- --------------------------- ----- -------- - -------------- -- ---------------- -------------------------------------- -- - --------------------------- -- ------------- ---
在上面的示例中，我们使用 Promise.race() 方法在数组 requests 中的多个 Promise 对象请求中只处理最先完成的请求，并打印该请求的响应数据。
总结
ES6 的 Promise.race() 方法可以帮助我们在多个并发请求中只处理最先完成的请求，从而提高代码性能和用户体验。在使用 Promise.race() 方法时，需要注意取消未被选中的 Promise 对象，以免造成资源浪费。
如果你在开发中遇到了多个并发请求的问题，不妨尝试使用 Promise.race() 方法优化代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f0578df6b2d6eab3a57fd8