ES6 中使用 Promise.allSettled 实现批量请求错误处理

在前端开发中，我们经常需要发起多个请求，同时处理它们的响应结果。当其中一个请求出现错误时，我们需要对错误进行处理，这时候就需要使用 Promise.allSettled 进行批量请求错误处理。

Promise.allSettled 简介

Promise.allSettled 是 ES2020 中新增的一个方法，用于处理多个 Promise 对象的状态。它接收一个 Promise 数组作为参数，返回一个新的 Promise 对象，该 Promise 对象在所有 Promise 对象都被 settled（即状态变为 fulfilled 或 rejected）后，才会被 resolved。

Promise.allSettled 的返回值是一个数组，数组中的每个元素都是一个对象，代表对应的 Promise 对象的状态。对象有两个属性：status 和 value。其中 status 代表 Promise 对象的状态，可能的值为 "fulfilled" 或 "rejected"；value 代表 Promise 对象的返回值或错误信息。

批量请求错误处理示例

假设我们需要向服务器发起两个请求，分别为获取用户信息和获取用户订单信息。我们使用 Promise.allSettled 进行批量请求错误处理，示例代码如下：

// www.javascriptcn.com code example
const getUserInfo = fetch('/api/user/info');
const getUserOrder = fetch('/api/user/order');

Promise.allSettled([getUserInfo, getUserOrder])
  .then(results => {
    const userInfoResult = results[0];
    const userOrderResult = results[1];

    if (userInfoResult.status === 'fulfilled') {
      const userInfo = userInfoResult.value.json();
      // 处理用户信息
    } else {
      const userInfoError = userInfoResult.reason;
      // 处理获取用户信息失败的情况
    }

    if (userOrderResult.status === 'fulfilled') {
      const userOrder = userOrderResult.value.json();
      // 处理用户订单信息
    } else {
      const userOrderError = userOrderResult.reason;
      // 处理获取用户订单信息失败的情况
    }
  });

在上述代码中，我们发起了两个请求，使用 Promise.allSettled 对它们进行批量请求错误处理。当两个请求都 settled 后，我们分别处理它们的响应结果。

如果其中一个请求出现了错误，我们可以通过判断对应的 Promise 对象的状态和 reason 属性来处理错误情况。

学习和指导意义

使用 Promise.allSettled 进行批量请求错误处理，可以提高代码的可读性和可维护性。通过统一处理多个请求的错误情况，我们可以减少重复代码，避免遗漏错误处理。

此外，Promise.allSettled 还可以与 async/await 结合使用，更加简洁地处理多个请求。例如：

// www.javascriptcn.com code example
async function getUserInfoAndOrder() {
  const [userInfoResult, userOrderResult] = await Promise.allSettled([getUserInfo, getUserOrder]);

  if (userInfoResult.status === 'fulfilled') {
    const userInfo = userInfoResult.value.json();
    // 处理用户信息
  } else {
    const userInfoError = userInfoResult.reason;
    // 处理获取用户信息失败的情况
  }

  if (userOrderResult.status === 'fulfilled') {
    const userOrder = userOrderResult.value.json();
    // 处理用户订单信息
  } else {
    const userOrderError = userOrderResult.reason;
    // 处理获取用户订单信息失败的情况
  }
}

在上述代码中，我们使用 async/await 简化了 Promise.allSettled 的使用方式，并且在函数级别上处理了多个请求的错误情况。

总之，掌握 Promise.allSettled 的使用方式，可以帮助我们更好地处理多个请求的错误情况，提高代码的可读性和可维护性。

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