引言
在前端开发中，异步编程是一个非常重要的话题，而 Promise 是一种流行的解决方案。ES6 中引入的 Promise.all 和 Promise.race 方法，可以帮助我们更加高效地处理异步操作。本文将介绍 Promise.all 和 Promise.race 的用法、应用场景及注意事项。
Promise.all 方法
Promise.all 方法接收一个由 Promise 对象组成的数组作为参数，返回一个 Promise 对象。当数组中所有的 Promise 对象都成功时，返回的 Promise 对象才会成功。如果有一个 Promise 对象失败，则返回的 Promise 对象会立即失败。
用法示例
-- -------------------- ---- -------
----- -------- - -------------------
----- -------- - --- ----------------- ------- -- -
------------------- ---- -------
---
----- -------- - ------------------ --------------
---------------------- ----------
---------------- --------- -- -
-------------------- ---------
-- -------- ------- -- -----
--
------------ -- --------------------
---------------------- ----------
---------------- --------- -- -
-------------------- ---------
--
------------ -- ----------------------------上面的代码中，第一个 Promise.all 方法会输出 1 和 "foo"，因为数组中的两个 Promise 对象都成功了；而第二个 Promise.all 方法会输出 Error: bar，因为数组中的第二个 Promise 对象失败了。
应用场景
Promise.all 方法可以用于多个异步操作的并行处理。例如，在一个页面中需要同时加载多个图片，可以将每个图片的加载操作封装成一个 Promise 对象，然后使用 Promise.all 方法来处理这些异步操作的结果。
-- -------------------- ---- -------
----- --------- - --- --
--- ----------------- ------- -- -
----- --- - --- --------
---------- - -- -- -------------
----------- - -------
------- - ----
---
----- ---- - -
--------------------------------
--------------------------------
--------------------------------
--
--------------------------------
------------ -- -
--------------------
-- -------- ------- ----- ------- ------ ------
--
------------ -- --------------------上面的代码中，loadImage 函数返回一个 Promise 对象，用来加载指定 URL 的图片。urls 数组中包含了三个图片的 URL，使用 Promise.all 方法并行加载这三个图片，最终得到一个包含三个图片对象的数组。
Promise.race 方法
Promise.race 方法接收一个由 Promise 对象组成的数组作为参数，返回一个 Promise 对象。当数组中有一个 Promise 对象成功或失败时，返回的 Promise 对象就会立即成功或失败。
用法示例
-- -------------------- ---- ------- ----- -------- - --- ----------------- ------- -- - ------------------- ---- ------- --- ----- -------- - --- ----------------- ------- -- - ------------------- ---- ------- --- ----------------------- ---------- ----------- -- -------------------- -- -------- ------- -----
上面的代码中，Promise.race 方法会在 promise2 完成后立即返回，并输出 "two"。
应用场景
Promise.race 方法可以用于多个异步操作的竞争处理。例如，在一个页面中需要同时请求多个 API 接口，但只需要获取最先返回的结果，可以使用 Promise.race 方法处理这些异步操作的结果。
-- -------------------- ---- -------
----- -------- - --- --
----------
-------------- -- ----------------
---------- -- -- ---- ---- ----
----- ---- - -
-------------------------
--------------------------
---------------------------
--
--------------------------------
------------ -- -
--------------------
-- -------- ------- - ---- -------------------------- ----- --- -
--
------------ -- --------------------上面的代码中，fetchApi 函数用来请求指定 URL 的 API 接口，并将返回的数据封装成一个对象。urls 数组中包含了三个 API 接口的 URL，使用 Promise.race 方法竞争请求这三个接口，最终得到一个返回最快的 API 接口的数据对象。
注意事项
在使用 Promise.all 和 Promise.race 方法时，需要注意以下几点：
- Promise.all 方法的返回值是一个数组，数组中的元素的顺序与传入的 Promise 对象的顺序相同。
- Promise.race 方法的返回值是最先完成的 Promise 对象的结果。
- 如果传入的数组中有非 Promise 对象，Promise.all 和 Promise.race 方法会将其转换为一个立即成功的 Promise 对象。
- 如果传入的数组中有一个 Promise 对象失败，Promise.all 方法会立即返回一个失败的 Promise 对象，Promise.race 方法会返回失败的 Promise 对象的结果。
结论
Promise.all 和 Promise.race 方法是异步编程中非常实用的工具，可以帮助我们更加高效地处理多个异步操作。在实际开发中，需要根据具体的场景选择使用哪个方法，并注意遵循上述的注意事项。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675d197ee1dcc5c0fa38d4ff