React中使用Promise.all调用多API并实现差异化错误处理

算力阿峰

2026-8-11

React中实现多API差异化错误处理的方案

核心思路

给每个API请求的Promise单独绑定专属错误处理逻辑，确保某个API失败时立刻执行自身的错误处理，不阻塞其他API
使用Promise.all并行执行所有请求，保证效率，同时即使部分请求失败，其余请求仍会正常完成

实现代码

// 定义API 1的请求及错误处理
const requestApi1 = fetch(api1)
  .then(res => res.json())
  .catch(err => {
    // API 1专属错误处理逻辑
    console.error("API 1请求失败:", err);
    // 返回错误标识，避免Promise.all整体中断
    return { error: true, source: "api1", message: err.message };
  });

// 定义API 2的请求及错误处理
const requestApi2 = fetch(api2)
  .then(res => res.json())
  .catch(err => {
    // API 2专属错误处理逻辑
    console.error("API 2请求失败:", err);
    return { error: true, source: "api2", message: err.message };
  });

// 并行执行所有请求
Promise.all([requestApi1, requestApi2])
  .then(results => {
    const [api1Result, api2Result] = results;
    // 处理API 1的成功结果
    if (!api1Result.error) {
      console.log("API 1返回数据:", api1Result);
      // 这里可以添加React状态更新等业务逻辑
    }
    // 处理API 2的成功结果
    if (!api2Result.error) {
      console.log("API 2返回数据:", api2Result);
      // 这里可以添加React状态更新等业务逻辑
    }
  });