利用 Promise.allSettled 实现一次性处理多个异步操作-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，异步操作是非常常见的，而在某些情况下，我们需要在多个异步操作都完成后再进行下一步的处理。这时，我们就需要用到 Promise.allSettled 方法来实现一次性处理多个异步操作的需求。

Promise.allSettled 的定义

Promise.allSettled 方法是 ES2020 新增的方法，用于接收一个 Promise 数组，返回一个新的 Promise 对象。当传入的所有 Promise 对象都已经 settled（即完成或拒绝）时，返回的 Promise 对象对应的回调函数会被调用。

Promise.allSettled 方法不会因为其中某个 Promise 被拒绝而中断整个操作，而是会等待所有 Promise 都 settled 后再执行回调函数，并返回一个包含所有 Promise 结果（包括已完成和已拒绝的 Promise）的数组。

Promise.allSettled 的使用场景

Promise.allSettled 方法适用于多个异步请求均为必须完成的情况，例如批量更新多条数据、获取多个接口数据后再进行页面渲染等场景。

示例代码

下面是一个使用 Promise.allSettled 方法的示例代码：

// javascriptcn.com 代码示例
const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 1 Fulfilled!');
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error('Promise 2 Rejected!'));
  }, 2000);
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 3 Fulfilled!');
  }, 3000);
});

Promise.allSettled([promise1, promise2, promise3])
  .then(results => {
    results.forEach(result => {
      if (result.status === 'fulfilled') {
        console.log(result.value);
      } else {
        console.log(result.reason);
      }
    });
  });

在这个示例代码中，我们使用 Promise.allSettled 方法并传入了一个包含三个 Promise 对象的数组。其中，promise1 和 promise3 都是返回成功的 Promise 对象，promise2 则是返回失败的 Promise 对象。

当传入的三个 Promise 都 settled 后，then 方法会被调用，并将一个包含三个结果的数组作为参数传入它的回调函数。我们可以通过遍历这个数组来获取每个 Promise 对象的结果。

总结

通过使用 Promise.allSettled 方法，我们可以在一次性中处理多个异步操作。这是一种非常有用的方法，特别是在处理需要多个异步操作的场景。我们可以通过该方法来避免因一个 Promise 被拒绝而中断整个操作的情况，并通过处理数组中所有的 Promise 结果来实现一次性处理多个异步操作的目的。

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