在前端开发中，异步编程一直是我们需要面对的问题之一。为了解决异步编程过程中出现的回调地狱和可读性差等问题，Promise 是一种被广泛应用的解决方案。而在 ES2020 中，新增加的 Promise.allSettled() 方法则提供了一种新的 Promise 组合方式，可以更加方便地处理多个 Promise 的返回值。
Promise.allSettled() 的介绍和使用
Promise.allSettled() 方法接收一个 Promise 数组作为参数，并返回一个新的 Promise 对象。该 Promise 对象在所有传入的 Promise 都已经完成（fulfilled 或 rejected）后才会被 resolved。这个 Promise 对象包含一个数组，数组中的每个元素都是一个对象，对象包含两个属性：status 和 value（或 reason）。其中，status 表示传入的 Promise 对象的状态（fulfilled 或 rejected），value（或 reason）则表示 Promise 对象的返回值（或错误原因）。
Promise.allSettled() 方法的语法如下：
Promise.allSettled(promises)
其中，promises 是一个 Promise 数组。
下面是一个简单的示例：
-- -------------------- ---- -------
----- -------- - -------------------
----- -------- - ------------------ -----------------
----- -------- - -------------------
----------------------------- --------- ----------
--------------- -- -
---------------------
--
------------ -- -
-------------------
---在这个示例中，我们创建了三个 Promise 对象，分别是 promise1、promise2 和 promise3。promise1 和 promise3 分别是 fulfilled 状态，返回值为 1 和 3；而 promise2 是 rejected 状态，错误原因为一个 Error 对象。我们将这三个 Promise 对象作为参数传入 Promise.allSettled() 方法中，并在 then() 方法中打印返回值。
运行这段代码后，我们可以看到控制台输出了一个数组，数组中包含了三个对象。这三个对象分别表示了传入的三个 Promise 对象的返回值和状态。具体来说，第一个对象表示 promise1 的返回值和状态，第二个对象表示 promise2 的返回值和状态，第三个对象表示 promise3 的返回值和状态。它们的输出结果分别如下：
[
{ status: 'fulfilled', value: 1 },
{ status: 'rejected', reason: Error('reject') },
{ status: 'fulfilled', value: 3 }
]从输出结果中可以看出，Promise.allSettled() 方法返回了一个数组，这个数组中包含了三个对象。这三个对象分别表示了传入的三个 Promise 对象的返回值和状态。其中，第一个对象表示 promise1 的返回值和状态，它的 status 属性为 fulfilled，value 属性为 1；第二个对象表示 promise2 的返回值和状态，它的 status 属性为 rejected，reason 属性为一个 Error 对象；第三个对象表示 promise3 的返回值和状态，它的 status 属性为 fulfilled，value 属性为 3。
Promise.allSettled() 的指导意义
Promise.allSettled() 方法的出现，使得我们在处理多个 Promise 对象的返回值时更加方便。在以往的版本中，我们通常使用 Promise.all() 方法来处理多个 Promise 对象的返回值。但是 Promise.all() 方法只有在所有 Promise 对象都是 fulfilled 状态时才会被 resolved，一旦其中有一个 Promise 对象是 rejected 状态，就会直接跳转到 catch() 方法中。这就导致了一个问题，如果我们需要处理多个 Promise 对象的返回值，并且其中有一个 Promise 对象是 rejected 状态，我们就无法获取到其他 Promise 对象的返回值。
而 Promise.allSettled() 方法则不存在这个问题，它会将所有 Promise 对象的返回值都返回给我们。这样，在处理多个 Promise 对象的返回值时，我们就可以更加方便地进行处理。
Promise.allSettled() 的示例代码
下面是一个使用 Promise.allSettled() 方法处理多个 Promise 对象的示例代码：
-- -------------------- ---- -------
-------- -------------- -
----- -------- - ----------------------------------------
----- -------- - ----------------------------------------
----- -------- - ----------------------------------------
------ ----------------------------- --------- ----------
--------------- -- -
----- ---------------- - ----------------------- -- ------------- --- -------------
----- ---- - ----------------------------- -- ---------------------
----- --------------- - ----------------------- -- ------------- --- ------------
----- ------ - ---------------------------- -- -----------------------
------ - ----- ------ --
---
-
--------------
-------- ----- ------ -- -- -
------------------
----------------------
--
------------ -- -
-------------------
---在这个示例中，我们使用 fetch() 方法获取了三个数据，分别是 https://api.example.com/data/1、https://api.example.com/data/2 和 https://api.example.com/data/3。我们将这三个 Promise 对象作为参数传入 Promise.allSettled() 方法中，并在 then() 方法中过滤出 fulfilled 状态的 Promise 对象和 rejected 状态的 Promise 对象。然后，我们将 fulfilled 状态的 Promise 对象的返回值转换成 JSON 对象，并将其保存到 data 数组中。同时，我们将 rejected 状态的 Promise 对象的错误原因保存到 errors 数组中。最后，我们返回一个对象，这个对象包含了 data 和 errors 两个属性。在使用 fetchAllData() 方法时，我们可以通过 then() 方法获取到这个对象，并对其进行处理。
总结
Promise.allSettled() 方法是 ES2020 中新增加的一个 Promise 组合方式，可以更加方便地处理多个 Promise 的返回值。在处理多个 Promise 对象的返回值时，我们可以使用 Promise.allSettled() 方法来获取所有 Promise 对象的返回值，并对其进行处理。同时，我们也可以通过 Promise.allSettled() 方法获取到所有 Promise 对象的状态，从而更加方便地进行错误处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6613e722d10417a222458046