React中如何等待多个API调用函数完成后再执行后续请求？

你完全可以用async/await结合Promise.all来实现这个需求，这也是处理这类并行异步任务的最优方案之一，具体步骤如下：

1. 让前两个函数返回Promise #

首先要确保function1和function2返回API调用的Promise（fetch本身就返回Promise，只要把结果return出去即可）：

function function1() {
  return fetch('你的第一个API地址')
    .then(res => {
      if (!res.ok) throw new Error('请求失败');
      return res.json();
    })
    .then(data => {
      // 这里可编写对第一个接口返回数据的处理逻辑
      return data; // 可选：返回处理后的数据，后续代码可直接使用
    });
}

function function2() {
  return fetch('你的第二个API地址')
    .then(res => {
      if (!res.ok) throw new Error('请求失败');
      return res.json();
    })
    .then(data => {
      // 处理第二个接口的返回数据
      return data;
    });
}

如果习惯用async/await写法，也可以把这两个函数改成async函数，效果完全一致：

async function function1() {
  const res = await fetch('你的第一个API地址');
  if (!res.ok) throw new Error('请求失败');
  const data = await res.json();
  // 处理数据
  return data;
}

async function function2() {
  const res = await fetch('你的第二个API地址');
  if (!res.ok) throw new Error('请求失败');
  const data = await res.json();
  // 处理数据
  return data;
}

2. 在onSubmit中等待前两个调用完成后执行第三个 #

把onSubmit改成async函数，用Promise.all并行等待前两个API调用完成，之后再执行第三个：

async function onSubmit() {
  try {
    // 并行执行function1和function2，等待两者都完成
    const [result1, result2] = await Promise.all([function1(), function2()]);
    
    // 前两个调用全部完成后，发起第三个API请求
    const res = await fetch('你的第三个API地址');
    if (!res.ok) throw new Error('请求失败');
    const thirdResult = await res.json();
    
    // 处理第三个接口的返回数据
    console.log('第三个接口结果:', thirdResult);
  } catch (error) {
    // 统一处理所有API调用可能出现的错误（比如网络问题、接口报错）
    console.error('API请求出错:', error);
    // 这里可添加用户提示，比如setError('请求失败，请稍后重试')
  }
}

关键说明 #

• Promise.all会同时触发两个异步任务，等两者都成功完成后才会继续执行后续代码，比串行执行（先await function1()再await function2()）效率更高，节省时间。
• 必须添加错误处理：用try/catch包裹所有异步操作，避免单个API调用失败导致整个流程卡死，同时能给用户友好的错误提示。
• 如果onSubmit是React组件中的事件处理函数，直接定义成async函数完全没问题，React会兼容这种写法。

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