如何更好的使用 ES10 中的 Promise.allSettled？-JavaScript中文网-JavaScript教程资源分享门户

前言

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 请求的结果。如下所示：

// javascriptcn.com 代码示例
const promise1 = Promise.resolve(1);
const promise2 = Promise.reject(new Error("request failed"));
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // 这段代码不会执行
}).catch((error) => {
  console.error(error.message); // 这里会输出 "request failed"
});

这时就需要使用 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 的值，并进行进一步的处理。

// javascriptcn.com 代码示例
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) => {
  const fulfilledPromises = results.filter((result) => result.status === 'fulfilled').map((result) => result.value);
  const rejectedPromises = results.filter((result) => result.status === 'rejected').map((result) => result.reason);

  console.log(fulfilledPromises); // [1, 3]
  console.log(rejectedPromises); // [Error("request failed")]
});

在这个示例中，我们先根据返回的结果，使用 filter() 方法将所有成功或失败的 Promise 筛选出来。然后使用 map() 方法将所有成功或失败的 Promise 的值分别存到一个新的数组中。fulfilledPromises 数组和 rejectedPromises 数组分别包含了所有成功或失败的 Promise 的值。

总结

Promise.allSettled() 方法是 ES10 中新增的一个非常实用的方法，用于处理多个 Promise 的状态。相比于 Promise.all() 方法，更加灵活。本文介绍了如何使用 Promise.allSettled() 方法，同时也介绍了在实际开发中如何根据返回的结果进行进一步操作。希望本文对你了解 Promise 有所帮助，帮助你更好地使用 Promise。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653f56e07d4982a6eb8e22bc