随着前端技术的不断发展，异步编程已成为前端开发的重要部分。在过去，我们通常使用回调函数进行异步编程，但这种方式存在着回调地狱和可读性差等问题。为了解决这些问题，Promise 出现了，并且在 ES6 中得到了官方支持。ES11 中新增的 Promise.allSettled() 方法则进一步拓展了 Promise 的功能。
Promise.all()
在介绍 Promise.allSettled() 方法之前，我们先来简单回顾一下 Promise.all() 方法。Promise.all() 方法接收一个 Promise 数组作为参数，返回值为一个新的 Promise 对象。当传入的所有 Promise 都变为 resolved 时，返回的 Promise 对象才会变为 resolved；当传入的 Promise 中至少有一个变为 rejected 时，返回的 Promise 对象才会变为 rejected。
以下是 Promise.all() 方法的示例代码：
-- -------------------- ---- -------
--- -- - --- ----------------- ------- -- -
------------- -- -
----------- ----------
-- -----
--
--- -- - --- ----------------- ------- -- -
------------- -- -
----------- ----------
-- -----
--
--- -- - --- ----------------- ------- -- -
------------- -- -
---------- ----------
-- -----
--
---------------- --- ------------- -- -
----------------
------------ -- -
----------------
--执行以上代码，控制台输出为：
p3 rejected
可以看到，由于 p3 被 reject 了，Promise.all() 的返回值也是 rejected。
Promise.allSettled()
Promise.allSettled() 方法与 Promise.all() 类似，但它不会因为某个 Promise 被 reject 而立即退出并 reject，而是会等到所有 Promise 都执行完毕后再返回结果，返回的结果是一个包含每个 Promise 执行后状态的数组。
以下是 Promise.allSettled() 方法的示例代码：
-- -------------------- ---- -------
--- -- - --- ----------------- ------- -- -
------------- -- -
----------- ----------
-- -----
--
--- -- - --- ----------------- ------- -- -
------------- -- -
----------- ----------
-- -----
--
--- -- - --- ----------------- ------- -- -
------------- -- -
---------- ----------
-- -----
--
----------------------- --- ------------- -- -
----------------
--执行以上代码，控制台输出为：
Array(3)
0: {status: "fulfilled", value: "p1 resolved"}
1: {status: "fulfilled", value: "p2 resolved"}
2: {status: "rejected", reason: "p3 rejected"}可以看到，Promise.allSettled() 方法返回的是一个包含每个 Promise 执行后状态的数组，其中对象的 status 属性可能是 fulfilled 或 rejected，分别表示 Promise 的状态是 resolved 或 rejected。如果状态是 fulfilled，value 属性表示 Promise 的返回值；如果状态是 rejected，reason 属性表示 Promise 的错误信息。
应用场景
Promise.allSettled() 方法是在 Promise.all() 方法的基础上新增的方法，主要用于以下场景：
- 需要等待多个 Promise 全部执行完毕，而不管执行结果是 fulfilled 还是 rejected。
- 需要将所有 Promise 的执行结果统一处理，而不是在 Promise 中逐个处理结果。
例如，我们可以使用 Promise.allSettled() 方法来批量上传文件，然后将所有文件的上传结果统一处理，如下：
-- -------------------- ---- -------
-------- ------------------ -
----- -------- - --
--- ---- - - -- - - ------------- ---- -
----- -------- - --- ----------
----------------------- ---------
----- ------- - ----------------------------------- -
------- -------
----- --------
----------- -- -
-- --------- -
----- --- ----------- --- - -- ------ --------
-
------ ----- --- - -- ------ --------
------------ -- -
------ ----- --- - -- ------ -------
--
----------------------
-
------ ------------------------------------- -- -
----------------
--
-在 uploadFiles() 函数中，我们使用 Promise.allSettled() 方法将所有 Promise 的执行结果统一处理并输出，无论是 fulfilled 还是 rejected。
总结
Promise.allSettled() 方法是 Promise 的一个拓展方法，用于将多个 Promise 的执行结果统一处理。与 Promise.all() 方法不同，Promise.allSettled() 方法不会因为某个 Promise 被 reject 而立即返回，并且返回的结果是一个包含每个 Promise 执行后状态的数组。在实际开发中，我们可以通过使用 Promise.allSettled() 方法来统一处理多个 Promise 的执行结果，从而提高代码的可维护性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664c14cad3423812e4ae8a46