ES2020 中的 Promise.allSettled() 的详解和应用-JavaScript中文网-JavaScript教程资源分享门户

前端开发中，很多时候需要同时发起多个 API 请求，而且不论其中的某个请求返回结果是成功还是失败，都需要获取到所有请求的状态和结果，以便进行下一步的操作。这时，就可以使用 ES2020 新增的 Promise.allSettled() 方法。本文将详细介绍 Promise.allSettled() 的用法和应用。

Promise.all() 和 Promise.allSettled() 的区别

在介绍 Promise.allSettled() 方法之前，先简单介绍一下 Promise.all() 方法。Promise.all() 方法接收一个 Promise 数组作为参数，并返回一个 Promise 实例，其中当数组中所有 Promise 实例都 resolved 时，该 Promise 实例才 resolved，并返回所有 Promise 实例返回的结果；如果数组中某个 Promise 实例 rejected，那么该 Promise 实例也会 rejected，并返回该 Promise 实例的结果。

Promise.allSettled() 方法作为 Promise.all() 方法的补充，也接收一个 Promise 数组作为参数，但返回一个 Promise 实例，且不管 Promise 数组中的 Promise 实例是 resolved 还是 rejected，该 Promise 实例最终都会 resolved，并返回一个包含 Promise 数组中所有 Promise 实例状态和结果的对象数组。如果 Promise 数组中某个 Promise 实例 rejected，那么该对象数组中对应 Promise 实例的状态值为 'rejected'，并返回该 Promise 实例的值。如果 Promise 数组中某个 Promise 实例 resolved，那么对象数组中对应 Promise 实例的状态值为 'fulfilled'，并返回该 Promise 实例的值。

Promise.allSettled() 的用法

以下是 Promise.allSettled() 方法的语法：

Promise.allSettled(iterable);

其中，iterable 参数可以是一个可迭代对象，其可以包括 Promise 实例和非 Promise 实例。Promise.allSettled() 方法返回一个 Promise 实例，用于接收所有 Promise 实例的状态和结果。

下面是一个包含两个 Promise 实例的例子，其中一个 resolved，另外一个 rejected：

const promises = [
  Promise.resolve('resolved'),
  Promise.reject(new Error('rejected'))
];

Promise.allSettled(promises)
  .then(results => console.log(results));

上述代码输出结果为：

[
  { status: 'fulfilled', value: 'resolved' },
  { status: 'rejected', reason: Error: rejected }
]

Promise.allSettled() 的应用

Promise.allSettled() 方法在实际开发中的应用非常广泛。下面以一个简单的例子来说明如何使用 Promise.allSettled() 方法处理多个 API 请求，以便在所有请求返回后执行其他操作。

假设现在有三个 API 请求，分别是从服务器获取用户信息、获取文章列表和获取评论列表，其中任何一个请求返回失败都不会影响其他请求。此时可以使用 Promise.allSettled() 方法来处理这三个请求：

// javascriptcn.com 代码示例
const getUserData = fetch('/api/user');
const getArticleList = fetch('/api/article');
const getCommentList = fetch('/api/comment');

Promise.allSettled([getUserData, getArticleList, getCommentList])
  .then(results => {
    results.forEach(result => {
      if (result.status === 'fulfilled') {
        console.log(result.value);
      } else {
        console.error(result.reason);
      }
    });
    // 执行其他操作
  });

上述代码中，Promise.allSettled() 方法接收一个包含三个 API 请求的 Promise 数组，每个请求返回结果的状态和结果会被存储在结果数组 results 中，然后通过遍历 results 数组获取所有请求的状态和结果，并根据不同的状态执行不同的操作。

总结

本文详细介绍了 ES2020 中新增的 Promise.allSettled() 方法的用法和应用，同时与 Promise.all() 方法进行了简单比较，从具有深度和实际应用的角度一步一步地进行了讲解。在实际项目开发中，使用 Promise.allSettled() 方法可以更加方便地处理多个 API 请求，提高开发效率和代码质量。

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