ES11 中的 Promise.allSettled 使用案例详解
前言
随着前端技术的不断发展，JavaScript 语言也不断被完善和改进。其中 Promise 是常用的一种异步编程技术，而 ES11 新增的 Promise.allSettled 方法则为 Promise 实现了更为全面的功能，本文将详细讲解 Promise.allSettled 的使用案例。
什么是 Promise.allSettled 方法
Promise.allSettled 方法可以将多个 Promise 实例包装成一个新的 Promise 实例。该方法接收一个数组作为参数，数组的每个成员都是 Promise 实例。当所有 Promise 实例都完成（即不论是 fulfilled 或是 rejected），返回的 Promise 实例状态才能改变。
具体来说，当所有 Promise 实例都变为 settled 状态（fulfilled 或 rejected），返回的 Promise 实例包含一个数组，数组中每个成员都是一个对象，对应传入的 Promise 实例。每个对象都有以下两个属性：
- status: 字符串，表示 Promise 状态，可能的值有 "fulfilled" 和 "rejected"。
- value（或 reason): 对应 Promise 对象是否 fulfilled / rejected 的值。
其中，value 和 reason 分别表示 Promise 最终执行结果的返回值或错误信息。
总结来说，Promise.allSettled 方法会返回一个新的 Promise 实例，包含传入的所有 Promise 实例的状态和执行结果。不论传入的每个 Promise 实例最终的状态和执行结果如何，Promise.allSettled 都会等到它们都执行完毕后再返回结果。
Promise.allSettled 方法使用实例
下面我们来看一下 Promise.allSettled 的使用示例。
案例一
假设我们有三个异步请求，它们分别返回如下结果：
- 请求 A：成功并返回一个 {name: 'Alice'} 的对象。
- 请求 B：成功并返回一个 {age: 18} 的对象。
- 请求 C：失败，并返回一个错误信息 "request failed"。
我们想要用 Promise.allSettled() 方法来包装这三个请求，然后在它们都完成时进行处理：
-- -------------------- ---- -------
----- -------- - --- --------------- -- ------------- -- -------------- ---------- -------
----- -------- - --- --------------- -- ------------- -- ------------- ----- -------
----- -------- - --- ----------------- ------- -- ------------- -- ---------- -------------- ---------- -------
----------------------------- --------- ----------------------- -- -
---------------------- -- -
-- -------------- --- ------------ -
--------------------------
- ---- -
-----------------------------------
-
--
--输出结果为：
{name: 'Alice'}
{age: 18}
request failed可以看到，Promise.allSettled 方法处理了这三个请求，并将它们的执行结果包装成了对象。其中成功的请求返回了对应的对象，而失败的请求返回了错误信息。
案例二
接下来，我们再来看一个更加实际的应用场景。假设我们需要同时发起 10 个请求，这些请求分别向不同的 API 地址请求获得一些数据，而这些 API 的地址都存放在一个数组中。我们需要在这 10 个请求返回后，将其所获得的数据进行处理并输出。
-- -------------------- ---- -------
----- ------ - ----------------------------- ---------------------------- ---------------------------- ---------------------------- ---------------------------- ---------------------------- ---------------------------- ---------------------------- ---------------------------- ------------------------------
----- ------- - --- -- -
------ --- ----------------- ------- -- -
------------------------ -- -
-- ------------- -
-------------------------
- ---- -
---------- --------------- --- ------
-
--
--
--
--------------------------------- -- --------------------------- -- -
----- ----------- - ---
---------------------- -- -
-- -------------- --- ------------ -
-------------------------------
-
--
-------------------------
--这里我们创建了一个名为 getData 的函数，用于请求 API 并返回json格式的数据。在 Promise.allSettled 时，我们通过 map 方法遍历给定的 API 地址数组，并将它们分别传入 getData 函数来获取数据，最终将所有成功的数据放入名为 successData 的数组中，并在控制台上输出它。
结语
Promise.allSettled 方法可以将多个 Promise 实例包装成一个新的 Promise 实例，并处理这些 Promise 执行结果。这种异步编程技术在实际的开发中也有着广泛的应用场景。希望通过本文对 Promise.allSettled 的使用有更深入的认识，有助于大家进一步提升自己的前端开发技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645133d0675af4061b526aa6