ECMAScript 2020 实现 promise.allSettled 及错误处理的方法

随着 JavaScript 的不断发展，ES6 以及后续的版本不断推出更新。其中，在 ECMAScript 2020 中，新增了一个 promise.allSettled 方法，它可以用于等待所有 Promise 完成，并且不会因为某个 Promise 失败而中止。

promise.allSettled

常规情况下，我们在使用 promise.all 方法时，如果其中一个 Promise 出错了，则整个 Promise 都会被 reject，导致后续操作被中断。

那么，在 ECMAScript 2020 中，promise.allSettled 方法提供了一种新的解决方案，让我们更好的处理 Promise 的错误。

promise.allSettled 函数接受一个 Promise 数组，并返回一个新的 Promise，该 Promise 会在所有 Promise 执行完毕后 resolve，返回一个包含所有 Promise 的结果状态的数组对象。

const p1 = Promise.resolve(1);
const p2 = Promise.reject('error');
const p3 = Promise.resolve(3);

Promise.allSettled([p1, p2, p3])
  .then(results => console.log(results));

// 输出: [
//   { status: 'fulfilled', value: 1 },
//   { status: 'rejected', reason: 'error' },
//   { status: 'fulfilled', value: 3 }
// ]

可以看到，promise.allSettled 返回的是一个包含了所有 Promise 的状态和结果的数组对象，无论 Promise 是否成功执行。

错误处理

在实际开发中，处理 Promise 错误是非常必要的。如何在使用 promise.allSettled 的同时处理 Promise 的错误呢？

一种解决方案是，在得到所有 Promise 状态后，使用 for 循环遍历结果数组，手动处理 Promise 出错的情况。

const p1 = Promise.resolve(1);
const p2 = Promise.reject('error');
const p3 = Promise.resolve(3);

Promise.allSettled([p1, p2, p3])
  .then(results => {
    for (const result of results) {
      if (result.status === 'rejected') {
        console.error(result.reason);
        // 错误处理
      }
    }
    // 其他操作
  });

该方法缺点是，需要手动遍历结果数组，当 Promise 数组中包含大量 Promise 时，会显得非常繁琐和低效。

另一种优化方案是使用 promise.allSettled 和 Promise.prototype.catch 结合方式，来进行 Promise 的错误处理。

const p1 = Promise.resolve(1);
const p2 = Promise.reject('error');
const p3 = Promise.resolve(3);

Promise.allSettled([p1, p2, p3])
  .then(results => {
    // 其他操作
  })
  .catch(error => {
    console.error(error);
    // 错误处理
  });

通过将 Promise.allSettled 和 Promise.prototype.catch 结合使用，可以避免手动遍历结果数组，同时也可以在错误发生时进行处理。

总结

ECMAScript 2020 中引入的 promise.allSettled 方法可以帮助我们更好的处理 Promise 的错误，可以避免像 promise.all 方法一样因为某个 Promise 错误而中止整个程序的运行。

在使用 promise.allSettled 的同时，我们还需要注意对 Promise 的错误进行处理。可以手动遍历结果数组的方式来处理错误，也可以使用 promise.allSettled 和 Promise.prototype.catch 结合使用的方式来优化错误处理。

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