介绍
在前端开发中，经常需要处理异步数据，比如从服务器获取数据后进行渲染。但是，在处理异步任务的过程中，难免会出现多个异步任务同时执行的情况。这时，我们就需要用到 Promise.all() 和 Promise.race() 来帮助我们解决异步执行的问题。
Promise.all() 方法用于将多个 Promise 实例包装成一个新的 Promise 实例，当所有 Promise 都成功返回结果时，该新 Promise 返回的结果也是一个数组，包含所有 Promise 的返回值。而 Promise.race() 方法则是将多个 Promise 实例包装成一个新的 Promise 实例，当其中任意一个 Promise 成功返回结果时，该新 Promise 的返回值就是成功的 Promise 的返回值。
在 ES11 中，这两个方法都有一些新的用法和语法，本文将会详细介绍它们的用法和实际应用。
Promise.all()
基本用法
Promise.all() 方法接受一个由 Promise 实例组成的数组作为参数，并返回一个新的 Promise 实例。
示例代码：
-- -------------------- ---- -------
----- -------- - --- ----------------- ------- -- -
------------- -- -
--------------------
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
--------------------
-- ------
---
---------------------- ----------
------------ -- -
--------------------
--
------------ -- -
-------------------
---输出结果：
["promise1", "promise2"]
高级用法
空对象转数组
在 ES11 中，Promise.all() 方法新增了一个功能，可以将一个空对象转成一个空数组。
示例代码：
-- -------------------- ---- -------
----- --- - ---
----------------
------------ -- -
--------------------
--
------------ -- -
-------------------
---输出结果：
[]
Promise.allSettled()
在 ES11 中，Promise.all() 方法的一个新用法是 Promise.allSettled()，它接受一个 Promise 实例的数组作为参数，并返回一个新的 Promise 实例。不同于 Promise.all() 方法，只有所有 Promise 都成功返回结果时，Promise.allSettled() 方法返回的 Promise 才会被解决。
示例代码：
-- -------------------- ---- -------
----- -------- - --- ----------------- ------- -- -
------------- -- -
--------------------
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
-------------------
-- ------
---
----------------------------- ----------
------------ -- -
--------------------
--
------------ -- -
-------------------
---输出结果：
[
{ status: "fulfilled", value: "promise1" },
{ status: "rejected", reason: "promise2" }
]Promise.race()
基本用法
Promise.race() 方法与 Promise.all() 方法相似，都接受一个由 Promise 实例组成的数组作为参数，并返回一个新的 Promise 实例。不同之处在于，Promise.race() 方法当其中任意一个 Promise 成功返回结果时，返回的 Promise 也立即成功返回结果。
示例代码：
-- -------------------- ---- -------
----- -------- - --- ----------------- ------- -- -
------------- -- -
--------------------
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
--------------------
-- ------
---
----------------------- ----------
----------- -- -
-------------------
--
------------ -- -
-------------------
---输出结果：
promise1
高级用法
Promise.any()
在 ES11 中，Promise.race() 方法的一个新用法是 Promise.any()，它接受一个 Promise 实例的数组作为参数，并返回一个新的 Promise 实例。不同于 Promise.race() 方法，只有当至少一个 Promise 成功返回结果时，Promise.any() 返回的 Promise 才会被解决。
示例代码：
-- -------------------- ---- -------
----- -------- - --- ----------------- ------- -- -
------------- -- -
-------------------
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
--------------------
-- ------
---
---------------------- ----------
----------- -- -
-------------------
--
------------ -- -
-------------------
---输出结果：
promise2
实际应用
Promise.all() 和 Promise.race() 在实际开发中的应用非常广泛。比如，在使用 Vue.js 进行开发时，我们经常需要从服务器获取数据后进行渲染。这时，我们可以使用 Promise.all() 方法将多个异步任务包装成一个 Promise 实例，等待所有数据都获取成功后，再一次性进行渲染。
示例代码：
-- -------------------- ---- -------
------ --- ---- ------
------ ----- ---- --------
----- -------- - -------------------------------------------
----- -------- - -------------------------------------------
---------------------- ----------
------------------ ----------- -- -
-------------------------- ----------------
--
------------ -- -
-------------------
---另外，Promise.race() 方法也有非常实际的应用场景。比如，在前端性能优化中，我们经常需要对多个网络请求进行优化，以提高页面加载速度。这时，我们可以使用 Promise.race() 方法，等待最先返回结果的服务器返回结果，减少页面加载时间。
示例代码：
-- -------------------- ---- -------
------ --- ---- ------
------ ----- ---- --------
----- -------- - -------------------------------------------
----- -------- - -------------------------------------------
----------------------- ----------
-------------- -- -
--------------------------
--
------------ -- -
-------------------
---总结
本文详细介绍了在 ES11 中使用 Promise.all() 和 Promise.race() 来解决异步执行的问题。我们通过示例代码，介绍了它们的基本用法和高级用法，并且给出了实际应用的例子。通过学习本文，相信读者已经掌握了 Promise.all() 和 Promise.race() 的基本理论和实际应用，为以后的前端开发工作打下了良好的基础。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646dc453968c7c53b0c64dce