React函数组件中点击按钮按顺序调用两个API的实现方法

要实现点击Search按钮后先完成API A的调用再执行API B，你需要调整onSearch函数的逻辑，让B的调用等待A完成后再触发，下面是两种常用的实现方式：

方式一：使用Promise链式调用 #

把API B的调用放在API A的then回调函数内部，这样只有当A的请求成功完成后，才会执行B的调用：

import {A,B} from './service';
const onSearch = () =>{
  A().then(responseA => {
    // 这里可以处理API A的返回结果
    console.log('API A响应:', responseA);
    // 等待A完成后调用API B
    B().then(responseB => {
      // 处理API B的返回结果
      console.log('API B响应:', responseB);
    }).catch(errorB => {
      // 处理API B的请求错误
      console.error('API B请求失败:', errorB);
    });
  }).catch(errorA => {
    // 处理API A的请求错误
    console.error('API A请求失败:', errorA);
  });
}

方式二：使用async/await语法（更简洁直观） #

将onSearch声明为async函数，通过await关键字依次等待API A和API B的请求完成，这种写法可读性更强：

import {A,B} from './service';
const onSearch = async () =>{
  try {
    // 先等待API A调用完成
    const responseA = await A();
    console.log('API A响应:', responseA);
    
    // API A完成后，再调用API B
    const responseB = await B();
    console.log('API B响应:', responseB);
  } catch (error) {
    // 捕获任意一个API请求的错误
    console.error('请求失败:', error);
    // 如果需要区分A和B的错误，可以拆分出单独的try/catch块
  }
}

额外说明 #

• 两种方式都能保证API调用的顺序性，优先推荐async/await写法，代码更清晰易维护。
• 必须添加错误捕获逻辑（catch或try/catch），避免请求失败导致页面无响应或控制台报错。

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