在前端开发中，异步编程是非常常见的。我们需要处理从服务器获取数据、文件上传、动画效果等等各种异步操作。以前，我们通常使用 Promise.all 或 Promise.race 来同时处理多个异步请求，但这些方法有一个缺陷，就是只要有一个 Promise 的状态变为 rejected，整个 Promise 链就会停止执行。
ES2020 引入了一个新的 Promise 方法：Promise.allSettled。这个方法可以同时处理多个 Promise，即使其中有 Promise 被 rejected，也不会停止整个 Promise 链的执行。本文将详细介绍 Promise.allSettled 的用法，并通过实例代码演示如何使用它来优化异步编程。
Promise.allSettled 的用法
Promise.allSettled 接收一个 Promise 数组作为参数，并返回一个 Promise，它在所有 Promise 都已经 settled（即变为 fulfilled 或 rejected）时 resolve，返回一个包含每个 Promise 结果的数组。
Promise.allSettled 的语法如下：
Promise.allSettled(iterable)
其中，iterable 是一个 Promise 对象数组，可以是一个 Promise 数组、一个可迭代对象（如 Set 或 Map）或一个类数组对象（如 arguments 或 NodeList）。
Promise.allSettled 返回的 Promise 对象的状态只有两种：fulfilled 或 rejected。如果所有 Promise 都 fulfilled，Promise.allSettled 返回的 Promise 对象状态为 fulfilled，其值为一个数组，数组中每个元素都是一个对象，包含 Promise 的状态和值：
[
{ status: "fulfilled", value: 1 },
{ status: "fulfilled", value: 2 },
{ status: "fulfilled", value: 3 }
]如果其中有一个或多个 Promise 被 rejected，Promise.allSettled 返回的 Promise 对象状态为 fulfilled，其值同样为一个数组，数组中每个元素都是一个对象，包含 Promise 的状态和原因：
[
{ status: "fulfilled", value: 1 },
{ status: "rejected", reason: "error" },
{ status: "fulfilled", value: 3 }
]使用 Promise.allSettled 优化异步编程
使用 Promise.allSettled 可以优化异步编程，使得即使其中有一个或多个异步操作失败，整个异步操作链仍然可以继续执行。
下面是一个使用 Promise.allSettled 的示例代码。假设我们有一个页面，需要同时获取用户信息和商品列表。我们可以使用 Promise.allSettled 来同时处理这两个异步请求：
-- -------------------- ---- -------
----- ----------- - ----------------------
-------------- -- ----------------
---------- -- -----
------------ -- -- ----- ----
----- -------------- - -------------------------
-------------- -- ----------------
---------- -- -----
------------ -- -- ----- ----
-------------------------------- ----------------
------------- -- -
----- ---------- ------------ - --------
-- ---------------- --- ------------ -
-- ------
- ---- -
-- -------------
-
-- ------------------- --- ------------ -
-- ------
- ---- -
-- -------------
-
---在这个示例代码中，我们使用 fetch 方法获取用户信息和商品列表，并将它们封装为两个 Promise 对象。然后，我们使用 Promise.allSettled 来同时处理这两个 Promise 对象。在 Promise.allSettled 的回调函数中，我们可以根据每个 Promise 的状态来处理对应的数据或错误。
总结
ES2020 中的 Promise.allSettled 方法是一个非常有用的工具，可以帮助我们更好地处理异步编程。使用 Promise.allSettled 可以同时处理多个 Promise，即使其中有一个或多个 Promise 被 rejected，整个 Promise 链仍然可以继续执行。在实际开发中，我们可以使用 Promise.allSettled 来优化异步编程，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65057ceb95b1f8cacd1f25da