在前端开发中，我们经常需要处理异步操作，比如向后端发送请求、读取本地存储等等。而 Promise 是一种非常常用的处理异步操作的方式。在 ES6 中，Promise 已经被引入到了 JavaScript 中，它能够优雅地处理异步操作，避免了回调地狱的问题。而在 ES12 中，Promise 新增了一个方法 Promise.allSettled()，它能够更好地处理异步操作，本文将介绍如何使用 Promise.allSettled() 处理异步代码。
Promise.allSettled() 方法
Promise.allSettled() 方法接收一个 Promise 数组作为参数，返回一个新的 Promise 对象。当这个新的 Promise 对象的状态变为 fulfilled 时，说明所有的 Promise 都已经 settled，即所有的 Promise 都已经被 resolve 或 reject。Promise.allSettled() 方法的返回值是一个数组，数组中的每个元素都是一个对象，该对象包含了对应的 Promise 的状态和值信息，如下所示：
----------------------------- --------- --------- -----
--------------- -- -
---------------------
---results 数组中的每个元素都是一个对象，该对象有以下两个属性：
- status：表示 Promise 的状态，可能的值为 "fulfilled" 或 "rejected"。
- value：表示 Promise 的结果，如果状态为 "fulfilled"，则为 resolve 的结果，如果状态为 "rejected"，则为 reject 的原因。
Promise.allSettled() 的使用场景
Promise.allSettled() 方法适用于以下场景：
- 需要等待多个异步操作完成后再进行后续操作。
- 不关心异步操作的结果，只关心它们是否完成。
- 需要对多个异步操作的结果进行统一处理。
示例代码
下面是一个使用 Promise.allSettled() 方法的示例代码，假设我们需要向后端发送两个请求，分别获取用户信息和订单信息，然后在两个请求都完成之后再进行后续操作：
----- ----------- - -- -- -
------ --- ----------------- ------- -- -
------------- -- -
--------- ----- ----- ---- -- ---
-- ------
---
--
----- ------------ - -- -- -
------ --- ----------------- ------- -- -
------------- -- -
--------- --- -- ------- --- ---
-- ------
---
--
---------------------------------- ----------------
--------------- -- -
----- ---------------- ---------------- - --------
-- ---------------------- --- ------------ -
------------------------ ----------------------
- ---- -
------------------------ -----------------------
-
-- ----------------------- --- ------------ -
------------------------ -----------------------
- ---- -
------------------------ ------------------------
-
------------------------
---在上面的代码中，我们定义了两个异步操作 getUserInfo 和 getOrderInfo，它们分别模拟了向后端请求用户信息和订单信息，并且设置了不同的延迟时间。然后我们使用 Promise.allSettled() 方法将这两个异步操作组合起来，当两个异步操作都完成后，就可以对它们的结果进行统一处理。
总结
Promise.allSettled() 方法是一个非常实用的方法，它能够更好地处理异步操作。它适用于需要等待多个异步操作完成后再进行后续操作、不关心异步操作的结果、需要对多个异步操作的结果进行统一处理等场景。在实际开发中，我们可以使用 Promise.allSettled() 方法来简化异步代码，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660ba79ed10417a222bd2c1f