ECMAScript 2021 中的 Promise.allSettled 方法详解
在前端开发中，处理异步操作是非常常见的需求。在遇到多个异步操作时，需要同时处理它们的结果。在 ECMAScript 6 中，Promise.all 方法就提供了这种功能，它可以同时处理多个异步操作，并且可以等待所有异步操作完成后一起返回结果。在 ECMAScript 2021 中，新增了一个 Promise.allSettled 方法，它相比于 Promise.all 方法，更加严格，不会因为某个异步操作出错而中断其他异步操作的处理。
- Promise.all 方法
让我们先来回顾一下 Promise.all 方法的基本使用。假设我们需要同时请求两个不同的 API 接口，我们可以用 Promise.all 方法来处理：
-- -------------------- ---- -------
----- -------- - --------------------------------
----- -------- - --------------------------------
---------------------- ----------
------------------ ----------- -- -
------------------------- -----------
------------------------- -----------
--
-------------- -- -
--------------------- -------
---上面的代码中，我们使用 fetch 方法向两个不同的 API 接口发起了请求，然后将这两个 Promise 对象放入 Promise.all 方法中。当这两个异步操作都成功时，Promise.all 方法会返回一个包含这两个异步操作结果的数组，并且可以通过解构赋值获取每个异步操作的结果。如果其中任何一个异步操作出错，Promise.all 方法会直接进入 catch 部分。
- Promise.allSettled 方法
Promise.all 方法在遇到某个异步操作出错时，就会直接进入 catch 部分，这会导致其它异步操作的结果无法被处理。而 Promise.allSettled 方法则不会中断处理，而是会等待所有的异步操作完成，并统一返回一个数组。这个数组包含了每个 Promise 对象的状态信息，包括成功或失败的结果。
-- -------------------- ---- -------
----- -------- - ------------------------ ----
----- -------- - ----------------------- ----
----- -------- - ------------------------ ----
----------------------------- --------- ----------
-------------- -- -
---------------------- --------
--
-------------- -- -
--------------------- -------
---上面的代码中，我们使用 Promise.resolve 和 Promise.reject 方法创建了三个 Promise 对象，其中 promise2 是一个失败的 Promise 对象。通过 Promise.allSettled 方法，我们可以等待这三个异步操作都完成后，返回一个包含每个 Promise 对象的状态信息的数组，输出结果如下：
Result: [
{ status: 'fulfilled', value: 'Promise 1' },
{ status: 'rejected', reason: 'Promise 2' },
{ status: 'fulfilled', value: 'Promise 3' }
]除了状态信息之外，Promise.allSettled 方法还支持链式操作，我们可以使用 then 方法来对数组中的每个元素进行处理：
-- -------------------- ---- -------
----- -------- - ------------------------ ----
----- -------- - ----------------------- ----
----- -------- - ------------------------ ----
----------------------------- --------- ----------
-------------- -- -
------ -------------------- -- ----------- --- -------------
--
----------------------- -- -
---------------------- --------- -----------------
--
-------------- -- -
--------------------- -------
---上面的代码中，我们对 Promise.allSettled 方法返回的状态信息数组进行了过滤，并只返回状态为 fulfilled 的 Promise 对象的结果。输出结果如下：
Fulfilled Result: [
{ status: 'fulfilled', value: 'Promise 1' },
{ status: 'fulfilled', value: 'Promise 3' }
]总结
通过以上示例可以看出，Promise.allSettled 方法相比于 Promise.all 方法，更加严格，不会因为某个异步操作出错而中断其他异步操作的处理。这为我们处理异步操作提供了更加灵活和全面的方案。在实际开发中，我们可以根据实际需求选择合适的方法来处理异步操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6492b12948841e989407dd21