在前端开发中，我们经常需要同时处理多个异步操作，而且这些异步操作并不一定都成功，可能会存在一些失败的情况。在 ECMAScript 2020 (ES11) 中，我们已经有了 Promise.all 方法来处理多个异步操作成功的情况，但对于存在失败情况的异步操作，我们需要另外寻求解决方案。在 ECMAScript 2021 (ES12) 中，我们新增了 Promise.allSettled 方法来处理这种情况。
Promise.allSettled 方法
Promise.allSettled 方法与 Promise.all 方法类似，都是传入一个 Promise 数组，并返回一个 Promise 对象。但是与 Promise.all 方法不同的是，Promise.allSettled 方法会等待所有 Promise 对象都被处理完毕后，才会将结果返回给调用者。而且，无论 Promise 对象是否成功或失败，Promise.allSettled 方法都会将每个 Promise 的结果放入到一个数组中返回给调用者。
具体使用方法如下：
----------------------------
--------------- -- -
-- ------
---其中，promises 参数是一个 Promise 数组，用来存一组需要处理的 Promise 对象。返回的 results 数组包含了所有 Promise 对象的执行结果，格式如下：
- -------- ------------ ------ -------- -------- ----------- ------- ------- --- -
其中，status 表示 Promise 对象的状态，可能是 fulfilled 或 rejected，对应着 Promise 对象的成功或失败。而 value 和 reason 则是 Promise 对象的返回值和错误信息。
使用 Promise.allSettled 处理多个异步操作
假设我们有一个需求，需要同时向两个不同的服务器发起请求，并收集他们的回应。但是，由于网络难免会存在一些波动，其中一个服务器可能会在请求过程中出现错误。这时候，我们需要使用 Promise.allSettled 方法来处理这种情况。
假设我们有两个异步请求函数 requestA 和 requestB，调用方式如下：
--------------------
-----------
----------
--
--------------- -- -
-- ------
---当 requestA 函数和 requestB 函数都执行结束后，回调函数中的 results 参数将会收到两个异步请求的结果，无论它们成功或失败。
例如，下面就是一个展示如何使用 Promise.allSettled 的例子：
----- -------- ------ -
----- --------- -------- - ----- --------------------
------------------------------------------------------
--------------------------------------------------------------
---
-- --------------- --- ------------ -
----------------- ----------------------
- ---- -
------------------------------
-
-- --------------- --- ------------ -
----------------- ----------------------
- ---- -
------------------------------
-
-
-------在这个例子中，我们使用 Promise.allSettled 方法来同时向两个不同的服务器发送请求，并分别将他们的结果打印到控制台上。如果其中一个请求失败了，我们使用 console.error 方法打印错误信息。
结论
使用 Promise.allSettled 方法能够方便地处理多个异步操作，使我们的代码更加简洁且易读。与 Promise.all 方法不同的是，Promise.allSettled 方法无论每个异步操作是否成功，都能将结果返回给我们，让我们更加方便地处理出错的情况。
现在，你已经掌握了使用 Promise.allSettled 方法的基本知识，赶快尝试在自己的项目中使用吧！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6711f78fad1e889fe201e3d5