前言
ES10 在 Promise 中增加了一个新的方法 Promise.allSettled()，可以用来处理多个 Promise 的状态，无论成功还是失败，都返回一个数组。相比于 Promise.all() 方法只有全部成功才会返回成功结果，Promise.allSettled() 则返回每个 Promise 的结果。本文将介绍如何更好的使用 ES10 中的 Promise.allSettled()，让你的开发更加便捷。
问题
在前端的项目中，我们常常需要处理多个 Promise 的结果。比如说，我们需要同时请求多个 API，然后根据所有结果的结果来渲染页面。在这种情况下，使用 Promise.all() 方法可以很轻松地解决问题。比如下面的示例：
const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);
Promise.all([promise1, promise2, promise3]).then((values) => {
console.log(values); // [1, 2, 3]
});但是，如果我们希望不仅仅在所有 Promise 成功的情况下，而是在所有 Promise 完成（无论成功还是失败）的情况下，都可以获取到结果时，Promise.all() 就不再适用了。
举个例子，假设我们需要请求三个不同的 API，但是第二个 API 请求失败了。如果我们使用 Promise.all()，那么整个 Promise 链都会失败，我们无法获取第一个和第三个 API 请求的结果。如下所示：
-- -------------------- ---- ------- ----- -------- - ------------------- ----- -------- - ------------------ -------------- ---------- ----- -------- - ------------------- ---------------------- --------- ------------------------ -- - -------------------- -- -------- ---------------- -- - ----------------------------- -- ----- -------- ------- ---
这时就需要使用 Promise.allSettled() 方法来处理多个 Promise 的状态了。
解决方案
Promise.allSettled() 方法会返回一个 Promise，这个 Promise 在所有输入的 Promise 都完成（无论成功还是失败）后才会 resolve。调用 Promise.allSettled() 的结果是一个数组，数组的每个元素都是一个对象，对象包含了 Promise 的结果。对象有两个属性，分别是 status 和 value（如果 status 是 Fulfilled），或者 reason（如果 status 是 Rejected）。
下面是使用 Promise.allSettled() 方法的示例代码。
const promise1 = Promise.resolve(1);
const promise2 = Promise.reject(new Error("request failed"));
const promise3 = Promise.resolve(3);
Promise.allSettled([promise1, promise2, promise3]).then((results) => {
console.log(results); // [{status: "fulfilled", value: 1}, {status: "rejected", reason: Error("request failed")}, {status: "fulfilled", value: 3}]
});可以看到，Promise.allSettled() 方法返回了所有 Promise 的结果。其中，第二个 Promise 的值是一个 rejected 的状态，所以 status 是 rejected，reason 是一个 Error 对象。而其他的 Promise 的值都是 fulfilled 的状态，所以status 是 fulfilled，value 是对应的值。
在实际开发中，我们也可以根据返回的结果进行判断和处理。比如，我们可以筛选出所有成功或失败的 Promise 的值，并进行进一步的处理。
-- -------------------- ---- ------- ----- -------- - ------------------- ----- -------- - ------------------ -------------- ---------- ----- -------- - ------------------- ----------------------------- --------- ------------------------- -- - ----- ----------------- - ----------------------- -- ------------- --- ------------------------- -- -------------- ----- ---------------- - ----------------------- -- ------------- --- ------------------------ -- --------------- ------------------------------- -- --- -- ------------------------------ -- --------------- --------- ---
在这个示例中，我们先根据返回的结果，使用 filter() 方法将所有成功或失败的 Promise 筛选出来。然后使用 map() 方法将所有成功或失败的 Promise 的值分别存到一个新的数组中。fulfilledPromises 数组和 rejectedPromises 数组分别包含了所有成功或失败的 Promise 的值。
总结
Promise.allSettled() 方法是 ES10 中新增的一个非常实用的方法，用于处理多个 Promise 的状态。相比于 Promise.all() 方法，更加灵活。本文介绍了如何使用 Promise.allSettled() 方法，同时也介绍了在实际开发中如何根据返回的结果进行进一步操作。希望本文对你了解 Promise 有所帮助，帮助你更好地使用 Promise。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653f56e07d4982a6eb8e22bc