React中使用Axios发起两次链式API调用的技术问询

我帮你整理并优化了这段Redux Thunk代码，让它更清晰易维护，同时修复了几个潜在问题：

优化后的代码 #

export const uploadImage = (data) => (dispatch) => {
  dispatch({ type: UPLOAD_IMAGE });

  // 提取通用错误处理逻辑，减少冗余
  const handleRequestError = () => dispatch({ type: UPLOAD_IMAGE_FAILURE });

  // 第一个API请求：获取预测数据
  axios({
    method: 'post',
    url: 'http://3.14.136.182:80/predict',
    data: data,
    headers: { 'content-type': 'multipart/form-data' },
    timeout: 20000
  })
  .then((predictRes) => {
    // 更新第一个请求的成功状态
    dispatch({ type: UPLOAD_IMAGE_SUCCESS, payload: predictRes.data });
    
    // 携带第一个接口的返回值，发起第二个API请求
    return axios({
      method: 'post',
      // 补全URL的http协议（原代码缺失会导致请求失败）
      url: 'http://3.14.136.182:8005/finalResult',
      data: predictRes.data,
      headers: { 'content-type': 'multipart/form-data' },
      timeout: 20000
    });
  })
  .then((finalRes) => {
    // 建议新增专属的Action Type，避免覆盖前一次的成功状态
    dispatch({ type: FINAL_RESULT_SUCCESS, payload: finalRes.data });
    console.log("Mehmood", finalRes.data);
  })
  .catch(handleRequestError);
};

关键优化点说明 #

• 修复URL问题：第二个API的URL缺失http://协议头，会导致浏览器无法识别请求地址，已经补全。
• 简化错误处理：把重复的失败dispatch逻辑提取成通用函数，减少代码冗余，后续修改错误逻辑只需要改一处。
• 变量名更清晰：用predictRes和finalRes区分两个接口的响应，避免覆盖传入的原始data参数，提升代码可读性。
• 移除冗余配置：原代码中的mimeType不是Axios的合法配置项，已经移除；如果你的请求数据是FormData实例，Axios会自动生成带boundary的content-type，这时候可以直接删掉手动设置的headers，避免潜在的请求格式错误。
• Action Type优化：原代码两次触发UPLOAD_IMAGE_SUCCESS会覆盖前一次的状态，建议新增FINAL_RESULT_SUCCESS这个专属Action Type，让Reducer可以分别处理两个接口的成功状态，更符合Redux的状态管理逻辑。

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