在现代前端开发中，异步操作是不可避免的。而 Promise 是 JavaScript 处理异步操作的利器之一，它可以在异步调用完成时为我们提供非常方便的处理方式。对于多个异步操作的情况，Promise.all() 是一个不错的选择。但是，如果其中某个 Promise 被拒绝，Promise.all() 就会失败。这时候，我们就需要一个更好的解决方案：Promise.allSettled()。
在本文中，我们将深入了解如何使用 npm 包 promise.allSettled，以及它的语法和功能。
promise.allSettled 简介
ECMAScript2020 新增了一个全新的 Promise 静态方法 promise.allSettled()。这个方法的作用是等待所有的 Promise 完成或被拒绝后再返回结果。不同于 promise.all()，promise.allSettled() 会返回一个由所有 Promise 状态组成的数组，而不只是完成状态的值数组。
Promise.allSettled() 的返回值是一个 Promise 对象，当所有的 Promise 都被处理完毕后，它会返回一个对象数组。对于每个对象，其值分别包含以下属性：
- status：表示 Promise 的状态，可能是 "fulfilled" 或 "rejected"。
- value：表示 Promise 的返回值或拒绝原因。
使用 promise.allSettled
使用 promise.allSettled() 的方法与 promise.all() 类似。可以通过传递一个包含多个 Promise 的数组，然后等待它们全部完成。
让我们看一个简单的例子：
const p1 = new Promise((resolve, reject) => setTimeout(resolve, 1000));
const p2 = Promise.reject(new Error('oops'));
Promise.allSettled([p1, p2]).then(results => {
console.log(results);
});在这个例子中，我们使用了两个 Promise，其中第一个是一个定时器，第二个是一个被拒绝的 Promise。我们将这两个 Promise 传递给 promise.allSettled()，然后使用 then() 来输出结果。
当这段代码被执行时，控制台会输出以下结果：
[
{status: "fulfilled", value: undefined},
{status: "rejected", reason: Error: oops}
]我们可以看到，返回的是一个数组，其中包含了两个 Promise 状态的信息。
Promise.all() 和 Promise.allSettled() 比较
当我们需要等待所有 Promise 成功时，使用 Promise.all() 更合适。但是，当我们需要等待所有 Promise 完成并返回所有状态信息时，则使用 Promise.allSettled() 更为方便。
让我们看一个简单的比较例子：
-- -------------------- ---- -------
----- -- - --- ----------------- ------- -- ------------------- ----- -------
----- -- - --- ----------------- ------- -- ------------------ ----- -------
----- -- - --- ----------------- ------- -- ------------------- ----- -------
---------------- --- ----------------- -- -
---------------------
---------- -- -
---------------
---
----------------------- --- ----------------- -- -
---------------------
---在这个例子中，我们使用了相同的 Promise，其中第一个和第三个 Promise 是返回成功的，第二个 Promise 是被拒绝的。我们分别使用 Promise.all() 和 Promise.allSettled() 来等待它们的结果。
当这段代码被执行时，控制台会输出以下结果：
-- -------------------- ---- -------
-- ------------- --
--
-- -------------------- --
-
-------- ------------ ------ ------
-------- ----------- ------- ------
-------- ------------ ------ -----
-我们可以看到，Promise.all() 当第二个 Promise 被拒绝时就直接抛出异常，而 Promise.allSettled() 则会返回全部 Promise 的执行结果。
总结
在本文中，我们学习了如何使用 promise.allSettled() 这个新的 Promise 静态方法，并了解了它与 Promise.all() 方法的区别。这个方法对于需要获取每个 Promise 执行状态的情况下非常有用。
在实际开发中，我们可以根据具体情况使用这两个方法中的一个，以便更好地满足我们的异步操作需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedbe7cb5cbfe1ea0611b6f