ReactJS中如何等待一个API调用完成后再执行下一个API调用

你的问题核心在于saveDefaultData方法没有返回Promise，导致await无法等待异步操作完成，进而两个API调用并行执行。以下是修正后的实现方案：

关键修改点 #

• 让saveDefaultData返回Promise：只有返回Promise的函数才能被await等待，否则await会直接跳过，继续执行后续代码。
• 统一使用async/await写法：相比嵌套then，async/await更直观，也更容易捕获所有错误。

修正后的代码 #

componentDidMount = async () => {
  try {
    const data = await MyApi.getInstance().count();
    // 补充数据长度判断逻辑
    if (data.length > 4) {
      await this.saveDefaultData();
      await this.getData(); // 若getData为异步操作，用await确保顺序执行
    } else {
      this.getData();
    }
  } catch (error) {
    // 统一处理所有异步操作的错误
    console.error('操作出错:', error);
  }
};

saveDefaultData = () => {
  // 返回API调用的Promise，让await可以等待其完成
  return MyApi.getInstance().saveSystemDefault()
    .catch(error => {
      console.error('保存默认数据失败:', error);
      throw error; // 抛出错误让外层catch捕获
    });
};

getData = () => {
  // 返回Promise，方便外层用await等待
  return MyApi.getInstance().getAllData()
    .then((data: any) => {
      // 执行状态更新操作
      this.setState({ data });
    })
    .catch(error => {
      console.error('获取数据失败:', error);
      throw error;
    });
};

额外说明 #

1. 原代码中componentDidMount的try/catch无法捕获then回调内的错误，改成async/await后，所有异步操作的错误都能被外层catch统一处理。
2. 如果getData的状态更新依赖saveDefaultData的执行结果，必须用await调用getData，确保严格顺序。
3. 记得保留原需求中“数据长度大于4”的判断逻辑，否则会默认执行保存操作。

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