React中如何串行调用Axios接口：先执行/deactivate请求再调用/get获取最新状态

核心问题根因 #

逗号操作符会从左到右依次执行操作数，但只会返回最后一个操作数的结果。你现有代码用逗号操作符并列axios.post和axios.get调用，等于同时发起两个独立的Promise：

• 既不会等待/deactivate请求执行完成就直接发起/get请求，无顺序保证
• 第一个post请求的Promise被直接丢弃，既没有捕获执行结果也没有捕获错误，一旦post请求因为参数、跨域、接口报错等原因失败，get请求仍会照常发起，最终就会出现「停用请求未正常发起、仅触发/get调用」的表象
• 甚至未被捕获的post请求失败还会导致全局的Promise报错

常见错误代码示例

const onHandleDeactivate = () => {
  // 错误写法：逗号并列两个请求，并行触发，无顺序保证
  axios.post(`/deactivate/${selectedId}`), axios.get(`/get/${selectedId}`).then(res => {
    setLocalState(res.data)
  })
}

解决方案 #

核心思路是通过Promise的执行顺序控制，确保/deactivate请求完全成功返回后，再发起/get请求。

方案1：async/await 实现（推荐） #

用async/await语法可以让代码逻辑和书写顺序完全一致，可读性更强，同时可以统一捕获全流程的错误。

const onHandleDeactivate = async () => {
  try {
    // 等待停用请求成功执行完成
    await axios.post(`/deactivate/${selectedId}`)
    // 停用成功后，拉取最新状态
    const statusResponse = await axios.get(`/get/${selectedId}`)
    // 直接更新本地React状态，无需刷新页面
    setLocalState(prevState => ({
      ...prevState,
      status: statusResponse.data.status // 提取返回的'deactivated'标识
    }))
  } catch (error) {
    // 可在此处添加操作失败的提示逻辑
    console.error('停用操作执行失败', error)
  }
}

方案2：Promise 链式调用实现 #

如果不使用async/await语法，可通过Promise的then链式调用实现串行执行，只有上一个请求成功resolve后，才会进入下一个then的逻辑。

const onHandleDeactivate = () => {
  axios.post(`/deactivate/${selectedId}`)
    // 停用请求成功后才会执行该回调，返回get请求的Promise
    .then(() => axios.get(`/get/${selectedId}`))
    // get请求成功后更新本地状态
    .then(statusResponse => {
      setLocalState(prevState => ({
        ...prevState,
        status: statusResponse.data.status
      }))
    })
    // 统一捕获全流程的错误
    .catch(error => {
      console.error('停用操作执行失败', error)
    })
}

额外注意事项 #

• 需确认Axios的全局拦截器配置，确保/deactivate接口的成功响应会被正常判定为resolve，不会被错误拦截到catch分支
• 两个请求中拼接的selectedId需确保是UI上选中的有效ID，避免出现参数为空导致的请求异常

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