浅谈 ES11 中使用 Promise.allSettled() 处理多请求

在前端开发中，经常需要同时发起多个请求，例如在页面加载时需要同时请求多个数据接口。而在处理这些请求时，我们通常使用 Promise.all() 来统一处理多个请求的返回结果。但是，Promise.all() 存在一定的局限性，例如当其中一个请求失败时，Promise.all() 就会直接返回错误结果，而不会继续处理其他请求的结果。

为了解决这个问题，ES11（也称为 ES2020）引入了 Promise.allSettled() 方法，它可以处理多个 Promise 实例，不管这些 Promise 实例是 fulfilled 还是 rejected，都会返回一个包含所有 Promise 实例结果的数组。

Promise.all() 的局限性

先来看一下 Promise.all() 的用法：

// www.javascriptcn.com code example
const promise1 = Promise.resolve('Hello');
const promise2 = Promise.resolve('World');
const promise3 = Promise.reject(new Error('Something went wrong'));

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

在这个例子中，我们同时发起了三个 Promise 实例，其中 promise3 是一个 rejected 的 Promise 实例。当我们使用 Promise.all() 处理这三个 Promise 实例时，由于 promise3 的失败，Promise.all() 会直接返回一个 rejected 状态的 Promise 实例，而不会继续处理其他 Promise 实例的结果。这就导致了我们无法获取 promise1 和 promise2 的返回结果。

Promise.allSettled() 的用法

Promise.allSettled() 可以解决 Promise.all() 的局限性，它会等待所有 Promise 实例都 settled（即 fulfilled 或 rejected）后，返回一个包含所有 Promise 实例结果的数组。使用 Promise.allSettled() 的示例如下：

const promise1 = Promise.resolve('Hello');
const promise2 = Promise.resolve('World');
const promise3 = Promise.reject(new Error('Something went wrong'));

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

在这个例子中，我们同样发起了三个 Promise 实例，其中 promise3 是一个 rejected 的 Promise 实例。当我们使用 Promise.allSettled() 处理这三个 Promise 实例时，它会等待所有 Promise 实例都 settled 后，返回一个包含所有 Promise 实例结果的数组，即：

[
  { status: 'fulfilled', value: 'Hello' },
  { status: 'fulfilled', value: 'World' },
  { status: 'rejected', reason: Error: Something went wrong at <anonymous>:4:27 }
]

可以看到，Promise.allSettled() 返回的数组中，每个元素都包含了 Promise 实例的状态（fulfilled 或 rejected）以及对应的返回值或错误信息。

Promise.allSettled() 的指导意义

使用 Promise.allSettled() 可以更好地处理多个请求的返回结果，尤其是在处理多个异步请求时。它不仅可以获取所有请求的返回结果，还可以区分每个请求的状态（fulfilled 或 rejected），从而更加灵活地处理请求的结果。

在实际开发中，我们可以将多个请求的 Promise 实例放到一个数组中，然后使用 Promise.allSettled() 统一处理这些 Promise 实例的返回结果。这样可以简化代码，提高代码的可读性和可维护性。

示例代码

下面是一个使用 Promise.allSettled() 处理多个异步请求的示例代码：

// www.javascriptcn.com code example
const fetchUserData = () => fetch('https://api.example.com/users');
const fetchArticleData = () => fetch('https://api.example.com/articles');

Promise.allSettled([fetchUserData(), fetchArticleData()])
  .then((results) => {
    const [userData, articleData] = results;
    if (userData.status === 'fulfilled') {
      // 处理用户数据
    } else {
      console.error(userData.reason);
    }
    if (articleData.status === 'fulfilled') {
      // 处理文章数据
    } else {
      console.error(articleData.reason);
    }
  });

在这个例子中，我们同时发起了两个异步请求，分别是获取用户数据和获取文章数据。当这两个请求都 settled 后，我们可以通过 results 数组获取每个请求的返回结果，然后根据返回结果的状态（fulfilled 或 rejected）来处理请求的结果。这样可以更加灵活地处理多个异步请求的返回结果。

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