用 Promise.allSettled 改善 JavaScript 异步处理

处理异步操作是 JavaScript 编程中的重要部分。随着程序变得越来越复杂，我们经常需要同时执行多个异步任务，并妥善处理它们的结果。过去，开发者主要使用 Promise.all() 方法来处理多个并发的 Promise，但这种方法有一个明显的缺点：只要有一个 Promise 失败，整个操作就会立即失败。

Promise.all 的限制

让我们先看看 Promise.all() 的工作方式和它的局限性：

const promises = [
  fetch('/api/users'),
  fetch('/api/products'),
  fetch('/api/orders')
];

Promise.all(promises)
  .then(results => {
    // 处理所有成功的结果
    const [users, products, orders] = results;
    // 进一步处理数据
  })
  .catch(error => {
    // 只要有一个 Promise 失败，就会执行这里
    console.error('至少有一个请求失败:', error);
    // 但我们不知道哪些请求成功了，哪些失败了
  });

这种方法存在几个问题：

只要有一个 Promise 失败，整个操作就会失败
无法知道哪些操作成功了，哪些失败了
即使大部分操作成功，也无法获取成功操作的结果

在实际开发中，我们通常希望即使某些操作失败，也能继续处理成功的结果。比如，在加载网页的不同部分时，即使某个部分的数据获取失败，我们也希望显示其他成功获取的部分。

Promise.allSettled 的解决方案

Promise.allSettled() 解决了上述所有问题。它会等待所有 Promise 完成，不管它们是成功还是失败，然后返回一个包含每个 Promise 结果的数组。

const promises = [
  fetch('/api/users').then(r => r.json()),
  fetch('/api/products').then(r => r.json()),
  fetch('/api/orders').then(r => r.json())
];

Promise.allSettled(promises)
  .then(results => {
    results.forEach((result, index) => {
      if (result.status === 'fulfilled') {
        console.log(`Promise ${index} 成功:`, result.value);
      } else {
        console.log(`Promise ${index} 失败:`, result.reason);
      }
    });
    
    // 处理所有成功的结果，同时知道哪些失败了
    const successfulData = results
      .filter(result => result.status === 'fulfilled')
      .map(result => result.value);
      
    // 处理成功获取的数据
    processData(successfulData);
  });

理解 Promise.allSettled 的返回值

Promise.allSettled() 返回一个数组，每个元素对应一个 Promise 的结果，有两种可能的结构：

对于成功的 Promise：

{ status: 'fulfilled', value: 结果值 }

对于失败的 Promise：

{ status: 'rejected', reason: 错误原因 }

这种统一的结构让结果处理变得简单明了。

实际应用场景

Promise.allSettled 在许多实际场景中特别有用：

数据仪表板：当需要从多个独立数据源获取信息时，即使某些源暂时不可用，也能显示可用的数据。
批量操作：处理用户批量上传或删除操作时，即使部分操作失败，也能完成其他操作并向用户报告完整结果。
微服务架构：在由多个微服务组成的应用中，即使某些服务暂时不可用，也能保持核心功能的运行。

更复杂的示例

下面是一个更接近真实场景的例子：

// 模拟从不同服务获取数据
async function fetchUserData(userId) {
  // 模拟API调用
  return fetch(`/api/users/${userId}`);
}

async function fetchUserOrders(userId) {
  return fetch(`/api/orders?user=${userId}`);
}

async function fetchUserPreferences(userId) {
  return fetch(`/api/preferences/${userId}`);
}

// 使用 Promise.allSettled 获取用户完整信息
async function getUserFullProfile(userId) {
  const promises = [
    fetchUserData(userId),
    fetchUserOrders(userId),
    fetchUserPreferences(userId)
  ];
  
  const results = await Promise.allSettled(promises);
  
  const profile = {
    userData: null,
    orders: null,
    preferences: null,
    errors: []
  };
  
  results.forEach((result, index) => {
    const operationNames = ['用户数据', '订单数据', '偏好设置'];
    
    if (result.status === 'fulfilled') {
      // 根据索引分配结果到对应的属性
      if (index === 0) profile.userData = result.value;
      else if (index === 1) profile.orders = result.value;
      else if (index === 2) profile.preferences = result.value;
    } else {
      profile.errors.push({
        operation: operationNames[index],
        error: result.reason
      });
    }
  });
  
  return profile;
}

// 使用示例
getUserFullProfile(123)
  .then(profile => {
    console.log('用户档案:', profile);
    // 即使某些数据获取失败，也能显示可用的部分
  });

兼容性考虑

Promise.allSettled 是 ES2020 标准的一部分。对于需要支持旧版浏览器的项目，可以使用 polyfill：

// 简单的 Promise.allSettled polyfill
if (!Promise.allSettled) {
  Promise.allSettled = function(promises) {
    return Promise.all(promises.map(p => 
      Promise.resolve(p).then(
        value => ({ status: 'fulfilled', value }),
        reason => ({ status: 'rejected', reason })
      )
    ));
  };
}

总结

Promise.allSettled 是 JavaScript 异步编程中的一个重要工具。它让我们能够构建更加健壮的应用，优雅地处理现实世界中不可避免的错误情况。与 Promise.all 不同，它不会因为单个失败而放弃所有结果，而是提供完整的执行情况报告。

当你需要同时执行多个独立的异步操作，并且希望了解每个操作的最终状态时，Promise.allSettled 是最合适的选择。它特别适合那些需要最大限度保持应用可用性的场景，即使部分功能暂时不可用。

掌握 Promise.allSettled 的使用，将帮助你编写更加可靠和用户友好的 JavaScript 应用程序。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/13073