随着 JavaScript 的不断发展，Promise 已成为现代前端开发不可或缺的一部分。在 ES8 中，Promise.all 方法的出现大大简化了 Promise 的使用，而在 ES11 中，又新增了 Promise.allSettled 方法。本文将从 ES8 到 ES11，彻底介绍 Promise.allSettled 方法的使用和意义。
Promise.all 方法的缺点
在 ES6 中，Promise 对象被引入到 JavaScript 中，以解决回调地狱的问题。随之而来的，Promise.all 方法的出现更是简化了 Promise 的使用。Promise.all 可以接收一个 Promise 数组，返回一个新的 Promise，当数组中所有的 Promise 都被 resolve 后，新的 Promise 才会被 resolve。但是，Promise.all 方法还有一些缺点。
考虑以下代码：
-- -------------------- ---- -------
----- -------- - --- ----------------- ------- -- -
------------- -- -
---------------- - ----------
-- -----
--
----- -------- - --- ----------------- ------- -- -
------------- -- -
---------------- - ----------
-- -----
--
---------------------- ----------
------------ -- -
-------------------
--
------------ -- -
------------------
--如果其中的任意一个 Promise 被 reject，那么整个 Promise.all 的结果就会被 reject。这意味着即使其中的一个 Promise 已经 resolve 了，其他的还在执行中，整个操作也会被终止。
Promise.allSettled 方法的优点
在 ES11 中，Promise.allSettled 方法被引入。该方法与 Promise.all 方法类似，可以接收一个 Promise 数组，并返回一个新的 Promise。但是，与 Promise.all 不同的是，Promise.allSettled 会等待所有的 Promise 都被 resolve 或 reject 完成后，才会返回一个 resolve 的结果数组，而且即使其中某个 Promise 被 reject 了，也不会中断整个操作。例如，以下代码：
-- -------------------- ---- -------
----- -------- - --- ----------------- ------- -- -
------------- -- -
---------------- - ----------
-- -----
--
----- -------- - --- ----------------- ------- -- -
------------- -- -
--------------- - ----------
-- -----
--
----------------------------- ----------
------------ -- -
-------------------
--在这个例子中，promise1 resolve 了，而 promise2 被 reject 了。但是，Promise.allSettled 不会中断整个操作，而是等待两个 Promise 都完成后，返回一个 Promise.allSettled 解决的结果数组。这个结果数组如下：
[
{ status: 'fulfilled', value: 'Promise 1 resolved' },
{ status: 'rejected', reason: 'Promise 2 rejected' }
]可以看到，结果数组中包含了每个 Promise 的状态（fulfilled 或 rejected），以及对应的值或原因。
在实际开发中，这个功能非常有用。例如，在调用 API 时，我们可能需要同时发起多个请求，但是如果其中一个出现了错误，我们也需要知道所有请求的结果。使用 Promise.allSettled，我们可以等待所有的请求完成，并得到所有请求的结果，无论成功或失败。
使用 Promise.allSettled 方法的示例代码
-- -------------------- ---- -------
----- -------------- - -- -- -
------ -------------------------------------------
-
----- --------------- - -- -- -
------ --------------------------------------------
-
----- -------------- - -- -- -
------ -------------------------------------------
-
------------------------------------- ------------------ ------------------
------------- -- -
----- -------------- - --------------------- -- ------------- --- ----------------------- -- -------------
----- ------------ - --------------------- -- ------------- --- ---------------------- -- --------------
-------------------- ---------- ---------------
------------------ ---------- -------------
--在这个例子中，我们使用了 fetch API 发起三个不同的请求，同时使用 Promise.allSettled 等待所有请求返回结果。在 Promise.allSettled 的 then 回调中，我们可以通过过滤和映射结果数组来获取成功和失败的结果，分别打印到了控制台。
结论
在 ES11 中，Promise.allSettled 的引入大大增强了 Promise 的使用。在实际开发中，我们可以用它来等待多个 Promise 的返回结果，并获取所有 Promise 的状态和结果。虽然它在性能上可能没有 Promise.all 高效，但是在某些场景下，我们确实需要它的功能。使用 Promise.allSettled，我们可以更容易地处理多个异步请求的结果，从而优化我们的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674fb7e1e884a3e30f302621