在前端开发中，我们经常需要与后端进行数据交互，而这种数据交互大多数情况下都是异步的。但是，有时候我们会遇到请求超时的情况。在传统的写法中，我们通常使用 setTimeout 或者 setInterval 来实现超时处理，但是这种写法不仅繁琐，而且不够灵活，无法处理网络延迟和数据量过大等情况。
这时候，Promise.race 就派上用场了。Promise.race 可以在多个 Promise 都完成时返回最快完成的 Promise，并自动终止其他 Promise 的执行，从而达到超时处理的效果。下面，我们就来具体了解一下 Promise.race 的用法。
Promise.race 的基本用法
Promise.race 接受一个 Promise 数组作为参数，并返回一个新的 Promise 对象。这个 Promise 对象将会在 Promise 数组中的任何一个 Promise 完成时被解析。
示例代码如下：
const promise1 = new Promise(resolve => setTimeout(resolve, 500, 'result1')); const promise2 = new Promise(resolve => setTimeout(resolve, 1000, 'result2')); Promise.race([promise1, promise2]) .then(result => console.log(result)); // output: result1
上面的代码中，我们创建了两个 Promise 对象，分别在 500 毫秒和 1000 毫秒后完成，并返回自定义的结果。Promise.race 接收这两个 Promise 对象组成的数组作为参数，返回一个新的 Promise 对象，这个 Promise 对象在其中任何一个 Promise 完成后会被解析，并输出 Promise 的结果。
Promise.race 实现超时处理
Promise.race 最常用的场景之一就是实现异步请求超时处理。对于一些网络不稳定或者返回数据量过大的接口，我们不希望等待太长时间，这时候可以使用 Promise.race 来控制请求的超时时间。
示例代码如下：
-- -------------------- ---- -------
-------- ----------------------- -------- -
----- ------- - -----------
----- -------------- - --- ----------------- ------- -- -
------------- -- -
---------- ---------------
-- ---------
---
------ ---------------------- -----------------
-
---------------------------------------- -----
-------------- -- ----------------------
------------ -- ----------------------上面的代码中，我们封装了一个 requestWithTimeout 函数，接收需要请求的 URL 和超时时间作为参数。该函数中，我们使用了 fetch API 发起异步请求，并返回一个 Promise。同时，我们使用 setTimeout 函数创建了一个超时 Promise，当超时时间到达时，Promise 将会被拒绝，并抛出超时错误。接着，我们将这两个 Promise 组成一个数组，通过 Promise.race 控制整个异步请求的超时时间。
总结
通过上述的示例代码，我们可以看出，Promise.race 能够实现多个异步操作的超时处理，并且可以有效地处理网络不稳定和数据量过大等情况。同时，使用 Promise.race 的代码量很小，非常适合前端开发者使用。
当然，Promise.race 还有一些其他的用途，不仅仅局限于超时处理，我们可以根据实际需求进行灵活运用。因此，学习和掌握 Promise.race 对于我们提高代码的可读性、简化开发流程，提高工作效率都有很大帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a6553048841e98942ed5a4