React中使用Axios实现首个API调用无错才触发后续调用的方法

• 调用逻辑无串行等待：当前直接同步调用三个异步函数，未添加await等待前一个调用完成，三个请求会几乎并行触发，不存在先后依赖关系。
• 错误被内部吞噬：每个API调用函数内部的catch块捕获到错误后仅打印日志，没有向外抛出错误或返回失败标识，函数最终返回的始终是成功状态的Promise，外部无法感知调用失败。
• 代码存在语法错误：firstApiCall 中try块的闭合符号误写为]，secondApiCall中axios.post的参数括号未正确闭合，会直接导致代码运行报错。

核心思路是：先让每个API调用的结果可以被外部感知，再通过串行await控制执行流程，前一步成功才执行下一步。

方案1：错误抛出+全局捕获控制流程 #

// 修正语法错误，捕获错误后向外抛出，让外部感知调用失败
const firstApiCall = async () => {
  try {
    await axios.post(
      process.env.FIRST_API,
      payload
    );
  } catch (err) {
    console.log(`first api err:`, err);
    // 向外抛出错误，中断后续流程
    throw err;
  }
};

const secondApiCall = async () => {
  try {
    await axios.post(
      process.env.SECOND_API,
      payload
    );
  } catch (err) {
    console.log(`second api err:`, err);
    throw err;
  }
};

const thirdApiCall = async () => {
  try {
    await axiosInstance.patch(
      process.env.THIRD_API,
      payload
    );
  } catch (err) {
    console.log(`third api err:`, err);
    throw err;
  }
};

// 编写串行执行的主函数，前一个调用成功才会执行下一个
const runSerialApi = async () => {
  try {
    await firstApiCall();
    await secondApiCall();
    await thirdApiCall();
    console.log('全部接口调用完成');
  } catch (err) {
    // 任意一步报错都会进入这里，中断后续调用
    console.log('调用流程中断:', err);
  }
};

runSerialApi();

方案2：返回成功标识判断执行 #

如果不想向外抛出错误，也可以让每个接口调用函数返回布尔值标记调用结果，主流程根据返回值判断是否继续执行：

const firstApiCall = async () => {
  try {
    await axios.post(process.env.FIRST_API, payload);
    return true;
  } catch (err) {
    console.log(`first api err:`, err);
    return false;
  }
};

const secondApiCall = async () => {
  try {
    await axios.post(process.env.SECOND_API, payload);
    return true;
  } catch (err) {
    console.log(`second api err:`, err);
    return false;
  }
};

const thirdApiCall = async () => {
  try {
    await axiosInstance.patch(process.env.THIRD_API, payload);
    return true;
  } catch (err) {
    console.log(`third api err:`, err);
    return false;
  }
};

const runSerialApi = async () => {
  const firstSuccess = await firstApiCall();
  if (!firstSuccess) return;
  const secondSuccess = await secondApiCall();
  if (!secondSuccess) return;
  await thirdApiCall();
};

runSerialApi();

你遇到的CORS错误属于跨域配置问题，需要服务端配置对应的跨域允许头，或者本地开发时配置代理转发请求，上述流程修改仅能解决后续接口误触发的问题，无法修复CORS报错本身。

内容的提问来源于stack exchange，提问作者krsna