ES7 中如何正确使用 Promise.all
在前端开发中，异步编程是必不可少的一环。而 Promise.all 则是异步编程中非常实用的一个方法，它可以将多个 Promise 实例包装成一个新的 Promise 实例，等所有的 Promise 实例都成功时才会触发成功回调，只要有一个失败就会触发失败回调。在 ES7 中，Promise.all 进行了优化，使得它更加强大和易用。
ES7 中的 Promise.all 支持传入一个可迭代对象，而不仅限于数组。这意味着我们可以使用 Set、Map、Generator 等类型作为参数，而不仅仅是数组。下面我们来看一下如何在 ES7 中正确使用 Promise.all。
- 基本用法
首先，让我们看一下 Promise.all 的基本用法。假设我们有两个异步操作，分别是获取用户信息和获取用户订单信息。我们可以使用 Promise.all 将它们组合起来，等待两个异步操作都完成后再进行后续操作。
----- ----------- - -- -- -
------ --- ----------------- ------- -- -
------------- -- -
--------- ----- ----- ---- -- --
-- -----
--
-
----- ------------- - -- -- -
------ --- ----------------- ------- -- -
------------- -- -
---------- --- -- ----- ----- -- - --- -- ----- ----- ---
-- -----
--
-
--------------------------- ---------------------------------- ------------ -- -
--------------------- -----------
--在上面的代码中，我们使用 Promise.all 将 getUserInfo 和 getUserOrders 两个异步操作组合起来，并在 Promise.all 的 then 方法中获取它们的结果。当两个异步操作都完成后，Promise.all 才会触发成功回调，并将结果以数组的形式传递给 then 方法的参数。
- 处理并发请求
Promise.all 还可以用于处理并发请求。假设我们需要从多个 API 接口获取数据，我们可以使用 Promise.all 将它们组合起来，等待所有请求都完成后再进行数据的处理。
----- ------- - -- -- -
------ --- ----------------- ------- -- -
------------- -- -
---------- --- -- ------ ----- -- - --- -- ------ ----- ---
-- -----
--
-
----- --------- - -- -- -
------ --- ----------------- ------- -- -
------------- -- -
---------- --- -- ------ ----- -- - --- -- ------ ----- ---
-- -----
--
-
----------------------- -------------------------- -------- -- -
----------------- -------
--在上面的代码中，我们使用 Promise.all 将 getNews 和 getVideos 两个异步请求组合起来，并在 Promise.all 的 then 方法中获取它们的结果。当两个异步请求都完成后，Promise.all 才会触发成功回调，并将结果以数组的形式传递给 then 方法的参数。
- 处理并发请求中的错误
当使用 Promise.all 处理并发请求时，如果其中一个请求失败了，Promise.all 就会触发失败回调，并将错误信息传递给 catch 方法。但是，如果我们只想处理失败的请求，而不想阻止其他请求的继续执行，该怎么办呢？
我们可以使用 Promise.allSettled 方法，它会等待所有请求都完成后，返回一个包含所有请求状态的数组，无论请求成功或失败。我们可以遍历这个数组，获取每个请求的状态和结果，然后根据需要进行处理。
----- ------- - -- -- -
------ --- ----------------- ------- -- -
------------- -- -
---------- --- -- ------ ----- -- - --- -- ------ ----- ---
-- -----
--
-
----- --------- - -- -- -
------ --- ----------------- ------- -- -
------------- -- -
--------------
-- -----
--
-
------------------------------ ---------------------------- -- -
------------------------ -- -
-- -------------- --- ------------ -
-------------------------
- ---- -
--------------------------
-
--
--在上面的代码中，我们使用 Promise.allSettled 将 getNews 和 getVideos 两个异步请求组合起来，并在 Promise.allSettled 的 then 方法中获取它们的结果。当两个异步请求都完成后，Promise.allSettled 会返回一个包含所有请求状态的数组，我们可以遍历这个数组，根据每个请求的状态和结果进行处理。
总结
在 ES7 中，Promise.all 进行了优化，支持传入一个可迭代对象，使得它更加强大和易用。我们可以使用 Promise.all 处理并发请求，等待所有请求都完成后再进行数据的处理。而当其中一个请求失败时，我们可以使用 Promise.allSettled 方法，获取所有请求的状态和结果，并根据需要进行处理。掌握 Promise.all 和 Promise.allSettled 方法的使用，可以让我们更加高效地进行异步编程，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65dc34ad1886fbafa4959524