在前端开发中，经常需要处理多个异步操作并等待所有异步操作完成后才进行下一步操作，此时就可以使用 Promise.all() 来实现。但是，当其中一个异步操作失败时，Promise.all() 就会立即退出并返回一个错误，这样就很难定位代码中具体出现了哪个错误。
为了解决这个问题，ES8 中新增了官方 Promise.allSettled() 方法。这个方法可以处理一个 Promise 数组，不管这些 Promise 成功还是失败，它都会等待所有 Promise 执行完毕后才返回一个包含所有 Promise 状态的数组。这个数组中的元素实际上是一个对象，包含每个 Promise 的状态和结果或原因。这样，即使其中一个 Promise 失败，其它 Promise 的结果仍可得到，开发者可以更直观地进行错误处理。
使用方法
Promise.allSettled() 的使用方法和 Promise.all() 类似，只是返回结果的格式略有不同：
Promise.allSettled([promise1, promise2, promise3, ...]) .then((results) => { // 处理结果 }) .catch((error) => { // 处理错误 });
其中，results 是一个对象数组，包含每个 Promise 的状态和值或原因。每个对象都包含以下两个属性：
- status: 表示 Promise 的状态，有两种值："fulfilled" 和 "rejected"。
- value: 表示 Promise 的结果或原因。
示例代码
比如，我们有三个异步操作，分别返回成功和失败的情况：
-- -------------------- ---- ------- ----- -------- - --- ----------------- ------- -- - ------------- -- - ---------------- - ------ -- ------ --- ----- -------- - --- ----------------- ------- -- - ------------- -- - --------------- - ------ -- ------ --- ----- -------- - --- ----------------- ------- -- - ------------- -- - ---------------- - ------ -- ------ ---展开代码
我们可以使用 Promise.allSettled() 来实现对所有 Promise 的处理，并对其中每个 Promise 的状态进行输出：
-- -------------------- ---- ------- ----------------------------- --------- ---------- --------------- -- - ------------------------ -- - -------------------- ----------------- ------------------ --- -- -------------- -- - ------------------- ---展开代码
输出结果如下：
Promise fulfilled: Promise 1 完成。 Promise rejected: Promise 2 失败。 Promise fulfilled: Promise 3 完成。
这样，我们就能看到每个 Promise 的状态和结果或原因。如果需要获得成功的 Promise 的结果，只需要通过 results.filter((result) => result.status === "fulfilled") 查询结果即可。
总结
ES8 中新增的 Promise.allSettled() 方法，能够更直观、方便地处理多个异步操作，并更有效地进行错误处理。学习这个方法并合理运用将会让我们的开发效率得到很大提升。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6583aec0d2f5e1655de84262
