ECMAScript 2020 引入 Promise.allSettled 方法优化 Promise 的操作-JavaScript中文网-JavaScript教程资源分享门户

随着 JavaScript 社区的不断发展，Promise 已成为异步编程中不可或缺的工具之一。然而，使用 Promise 时我们常常面临如何同时处理多个 Promise 实例的问题。在 ECMAScript 2020 中，开发者可以使用 Promise.allSettled 方法优化 Promise 操作，让 Promise 更加灵活和高效。

Promise.all 方法的简介

在介绍 Promise.allSettled 方法之前，我们先回顾一下 Promise.all 方法的作用。Promise.all 方法可以接受一个 Promise 实例的数组作为参数，并返回一个新的 Promise 实例，这个新 Promise 实例的状态取决于参数 Promise 实例中所有 Promise 实例的状态。以下是 Promise.all 方法的语法：

Promise.all(iterable);

Promise.all 方法的参数 iterable 是一个可迭代的 Promise 实例数组。

当参数数组内所有 Promise 实例都成功执行时，返回的 Promise 实例状态为 resolved，并将所有 Promise 实例返回的值组成一个数组作为 Promise 实例的值。

而当参数数组内任意一个 Promise 实例拒绝执行时，返回的 Promise 实例状态为 rejected，并抛出该 Promise 实例抛出的错误信息。

在借助 Promise.all 进行异步处理中，我们需要保证参数数组内的所有 Promise 实例都执行成功，避免程序出错。

Promise.allSettled 方法的介绍

与 Promise.all 方法不同的是，Promise.allSettled 方法无论 Promise 实例是否成功返回，都会返回一个新的 Promise 实例，并且会将所有 Promise 实例的结果组成一个数组返回。Promise.allSettled 方法的语法如下：

Promise.allSettled(iterable);

和 Promise.all 方法一样，Promise.allSettled 方法的参数 iterable 是一个可迭代的 Promise 实例数组，只是其返回值的状态不再仅仅取决于参数数组内所有 Promise 实例的状态是否成功，而是将每个数组元素作为一个对象，对象包含了状态和返回值。

返回的 Promise 实例状态为 fulfilled，无论参数数组内所有 Promise 实例是否成功，其结果都会组成一个数组返回。Promise.allSettled 新增的一个优点是，开发者不再需要保证参数数组内所有 Promise 实例都执行成功，我们只需要等待所有 Promise 执行完毕，再统一处理即可。

Promise.allSettled 的使用示例

下面我们通过一个简单的例子来演示 Promise.allSettled 方法的使用。在以下代码中，我们定义了两个 Promise 实例，一个成功实例和一个拒绝实例。我们使用 Promise.allSettled 方法将这两个实例组成一个数组，然后将结果输出到控制台，看看其方法如何工作。

const promise1 = Promise.resolve('Success'); // 成功实例
const promise2 = Promise.reject('Error'); // 拒绝实例

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

执行结果如下：

[ 
  { status: 'fulfilled', value: 'Success' }， // 成功实例结果
  { status: 'rejected', reason: 'Error' }    // 拒绝实例原因
]

可以看到，Promise.allSettled 的返回结果组成了一个数组，其中包含了参数数组内的两个 Promise 实例对应的结果以及它们各自的状态。

可以优化的应用场景

在实际开发中，如果项目涉及到执行多个异步操作的情况，可以考虑使用 Promise.allSettled 方法来优化代码。比如，在一个页面上可能会有多个接口需要请求，并且这些请求是独立的。

使用 Promise.allSettled 方法可以让我们在所有请求完成后再执行后续操作。而且不需要担心任何一个 Promise 拒绝或者失败的问题，即使一个 Promise 未能被解析，我们也可以轻松获得它的拒绝原因。

const fetchData1 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Request1 success');
    }, 2000);
  });
};

const fetchData2 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Request2 success');
    }, 3000);
  });
};

const fetchData3 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Request3 success');
    }, 1000);
  });
};

Promise.allSettled([fetchData1(), fetchData2(), fetchData3()]).then((response) => {
  console.log(response);
});

以上是一个简单的请求示例，我们使用 Promise.allSettled 方法发起了三个请求。即使其中的某个请求被拒绝或者拒绝，我们也可以获得错误信息。通过使用 Promise.allSettled，我们可以更加自信地处理多个异步请求，让代码更加稳定和健壮。

总结

在前端开发中，Promise 成为异步编程中的利器。Promise.allSettled 方法可以让我们更加灵活和高效地处理多个 Promise 实例。新的 Promise.allSettled 方法非常适合用于处理多个请求或者操作，维护 Promise 实例数组的执行状态，并将所有 Promise 实例的状态及其结果组成一个 Promise 实例数组返回，让我们的代码更加健壮、高效。

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

ECMAScript 2020 引入 Promise.allSettled 方法优化 Promise 的操作

Promise.all 方法的简介

Promise.allSettled 方法的介绍

Promise.allSettled 的使用示例

可以优化的应用场景

总结

纠错反馈