在前端开发中，我们经常会需要同时发起多个请求，并在所有请求完成后才继续进行下一步操作。ES8 新增了 Promise.race() 方法，可以帮助我们处理这种并发请求的情况。
Promise.race() 的基本用法
Promise.race() 方法接受一个 Promise 数组作为参数，返回一个新的 Promise 对象。该 Promise 对象会在其中一个输入 Promise 对象改变状态时，立即以该 Promise 的状态作为自己的状态。下面是 Promise.race() 方法的基本用法示例：
-- -------------------- ---- ------- ----- -------- - --- ----------------- ------- -- - ------------------- ---- ------------ --- ----- -------- - --- ----------------- ------- -- - ------------------- ---- ------------ --- ----------------------- ----------------------- -- - ------------------- -- ------- ---------- ---
在上面的代码中，我们先创建了两个 Promise 对象，promise1 和 promise2，它们分别在 500ms 和 100ms 后返回一个字符串值。接着，我们使用 Promise.race() 方法，将这两个 Promise 对象作为参数传入。由于 promise2 在 promise1 之前执行完毕，因此 Promise.race() 方法会返回一个新的 Promise 对象，并以 promise2 的状态和值作为其自己的状态和值。
Promise.race() 处理并发请求
下面我们来看一个并发请求的示例，假设我们需要从一个 API 的多个接口获取数据，并在所有请求完成后进行下一步操作。我们可以使用 Promise.race() 方法，以任意一个请求先完成的时间作为整体请求的时间，并且在请求完成后，从中找到最小或最大的值。
-- -------------------- ---- -------
----- ------- - --------------------------------
----- ------- - --------------------------------
----- ------- - --------------------------------
----- --------- - ----- -- -- -
----- --------- - ----- ---------------
----- --------- - ----- ---------------
----- --------- - ----- ---------------
----- ------ - ----- --------------
-----------------
-----------------
-----------------
---
---------------------- --------
-
------------在上述代码中，我们使用了 fetch() API 发起了三个请求，分别获取了 apiUrl1、apiUrl2 和 apiUrl3 接口返回的数据，并将返回的数据存储在变量 response1、response2 和 response3 中。接着，我们使用 Promise.race() 方法，将这三个 Promise 对象传入，并且使用 response.json() 方法将它们从 Response 对象转换为一个包含完整响应体的 JSON 对象。最后，我们用 result 变量来存储返回的数据，并打印它。
上面的代码通过将多个请求合并为一个 Promise.race() 以同时发起所有请求，并在其中一个请求完成后立即获取到结果。由于 Promise.race() 只会返回最先完成请求的结果，因此我们可以达到更快的响应时间。
总结
ES8 中的 Promise.race() 方法可以帮助我们处理多个并发请求的情况。该方法接受一个 Promise 数组作为参数，并在其中一个输入 Promise 对象改变状态时，立即以该 Promise 的状态作为自己的状态。在并发请求中，我们可以使用 Promise.race() 方法以任意一个请求先完成的时间作为整体请求的时间，并且在请求完成后，从中找到最小或最大的值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e73668f6b2d6eab32ac306