使用 ES10 中的 Promise.allSettled() 来解决 Promise.all() 中出现错误的问题

在前端开发中，异步操作是非常常见的。Promise 是一种处理异步操作的方式，它可以将异步操作封装成一个 Promise 对象，进而使用链式调用的方式进行操作。在 ES6 中，Promise 得到了官方支持，提供了一种更加方便的异步编程方式。

在实际开发中，我们经常需要同时执行多个异步操作，然后等待它们全部完成后再进行下一步操作。Promise.all() 方法正好可以满足这个需求，它可以将多个 Promise 对象包装成一个新的 Promise 对象，并等待所有的 Promise 对象都完成后，才会返回一个结果数组。

但是，Promise.all() 方法存在一个问题，如果其中一个 Promise 对象出现错误，那么整个 Promise.all() 方法就会抛出错误，导致后续的操作无法继续进行。这个问题在实际开发中是非常常见的，因此我们需要一种更加健壮的方式来解决这个问题。

ES10 中新增了一个 Promise.allSettled() 方法，它可以解决 Promise.all() 方法中出现错误的问题。Promise.allSettled() 方法会等待所有的 Promise 对象都执行完毕，不管是否出现错误，它都会返回一个结果数组。这个结果数组中包含了每一个 Promise 对象的执行结果，无论成功或者失败。

下面我们来看一个示例：

const promise1 = Promise.resolve(1);
const promise2 = Promise.reject(new Error('Error'));
const promise3 = Promise.resolve(3);

Promise.allSettled([promise1, promise2, promise3])
  .then((results) => {
    console.log(results);
  });

输出结果如下：

[
  { status: 'fulfilled', value: 1 },
  { status: 'rejected', reason: Error: Error at <anonymous>:2:24 },
  { status: 'fulfilled', value: 3 }
]

可以看到，Promise.allSettled() 方法返回了一个结果数组，其中包含了每一个 Promise 对象的执行结果。如果 Promise 对象执行成功，则结果数组中对应的对象的 status 属性为 fulfilled，value 属性为 Promise 对象的返回结果；如果 Promise 对象执行失败，则结果数组中对应的对象的 status 属性为 rejected，reason 属性为 Promise 对象的错误信息。

使用 Promise.allSettled() 方法可以更加健壮地处理多个异步操作，无论是否出现错误都可以得到每一个 Promise 对象的执行结果。

总结：在前端开发中，Promise 是一种处理异步操作的方式。Promise.all() 方法可以将多个 Promise 对象包装成一个新的 Promise 对象，并等待所有的 Promise 对象都完成后，才会返回一个结果数组。但是，如果其中一个 Promise 对象出现错误，整个 Promise.all() 方法就会抛出错误。ES10 中新增的 Promise.allSettled() 方法可以解决这个问题，它会等待所有的 Promise 对象都执行完毕，不管是否出现错误，都会返回一个结果数组，这个结果数组中包含了每一个 Promise 对象的执行结果，无论成功或者失败。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66038925d10417a222ff5916