在前端开发中，经常会遇到需要处理多个异步操作的情况，例如需要同时请求多个接口、同时上传多个文件等。在 ES6 中，我们可以使用 Promise.all 和 Promise.race 来处理这些情况。
Promise.all
Promise.all 可以同时处理多个异步操作，并在所有操作都完成后返回一个包含所有操作结果的数组。如果任何一个操作失败，则 Promise.all 会立即返回失败状态。
使用 Promise.all 的语法如下：
Promise.all([promise1, promise2, ...])
.then(results => {
// 处理所有操作的结果
})
.catch(error => {
// 处理错误
});其中，promise1、promise2 等表示需要处理的异步操作，可以是 Promise 对象或其他任何符合 Promise 标准的对象。
下面是一个使用 Promise.all 处理多个异步请求的示例：
-- -------------------- ---- -------
----- ---- - ---------------------------------- ----------------------------------
----- -------- - ------------ -- ------------
---------------------
--------------- -- -
------ ---------------------------------- -- ------------------
--
----------- -- -
-------------------
--
------------ -- -
---------------------
---在上面的示例中，我们首先定义了需要请求的 URL 数组，然后使用 map 方法将每个 URL 转换为一个 fetch 请求，并将这些请求放入 promises 数组中。最后，我们使用 Promise.all 处理这些请求，并在所有请求完成后将它们的响应转换为 JSON 格式，并输出到控制台中。
Promise.race
Promise.race 可以同时处理多个异步操作，并在其中任何一个操作完成后返回该操作的结果。如果任何一个操作失败，则 Promise.race 会立即返回失败状态。
使用 Promise.race 的语法如下：
Promise.race([promise1, promise2, ...])
.then(result => {
// 处理第一个完成的操作的结果
})
.catch(error => {
// 处理错误
});其中，promise1、promise2 等表示需要处理的异步操作，可以是 Promise 对象或其他任何符合 Promise 标准的对象。
下面是一个使用 Promise.race 处理多个异步请求的示例：
-- -------------------- ---- -------
----- ------- - ----- -- - ------
----- -------- - --- ----------------- ------- -- -
------------- -- -
---------------- - -----
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
---------------- - -----
-- ------
---
----------------------- --------- --- ----------------- ------- -- -
------------- -- -
---------- ---------------
-- ---------
----
------------ -- -
--------------------
--
------------ -- -
---------------------
---在上面的示例中，我们定义了两个异步操作 promise1 和 promise2，分别在 3 秒钟和 6 秒钟后完成。我们还定义了一个超时时间 timeout，设置为 5 秒钟。最后，我们使用 Promise.race 处理这两个异步操作和一个超时操作，并在其中任何一个操作完成后输出其结果到控制台中。如果超时操作先完成，则 Promise.race 会返回超时错误。
总结
在 ES6 中，我们可以使用 Promise.all 和 Promise.race 来处理多个异步操作。Promise.all 可以同时处理多个异步操作，并在所有操作都完成后返回一个包含所有操作结果的数组。Promise.race 可以同时处理多个异步操作，并在其中任何一个操作完成后返回该操作的结果。在实际开发中，我们可以根据具体情况选择使用哪种方法来处理多个异步操作，从而提高代码的可读性和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65545b30d2f5e1655de106b9