React中Axios代码存在错误，如何优化及正确使用？

原代码中的核心问题 #

• 参数传递错误：axios.post的第三个参数直接是配置对象，不需要嵌套{ options }
• 重复定义Content-Type：headers里同时存在冲突的content-type和ContentType字段
• 数据格式冗余：手动将对象转为JSON字符串，Axios可自动完成该转换
• 异步请求未正确等待：async函数内未用await等待请求完成，会返回未resolved的Promise
• 环境变量未正确读取：REACT_APP_KEY需通过process.env获取，不能直接写字符串
• 无效全局代码：末尾的axios.post调用未处理异步逻辑，且data变量未定义

优化后的完整代码 #

import axios from "axios";

// 创建可复用的请求实例，统一配置基础参数
const apiClient = axios.create({
  baseURL: 'https://rdrunnerxx-trackservice.p.rapidapi.com',
  headers: {
    'Content-Type': 'application/json',
    'X-RapidAPI-Key': process.env.REACT_APP_RAPIDAPI_KEY,
    'X-RapidAPI-Host': 'rdrunnerxx-trackservice.p.rapidapi.com'
  }
});

export const ApiService = {
  async fetchRoute() {
    try {
      // 直接传递JS对象，Axios自动转为JSON格式
      const requestData = {
        Locations: [
          { LatLong: { Latitude: 39.767968, Longitude: 64.421725 } },
          { LatLong: { Latitude: 40.022882, Longitude: 64.516878 } }
        ],
        RouteOptions: {
          DistanceUnit: 0,
          RouteOptimize: 0,
          Culture: "en-US",
          MapSize: null,
          RouteColor: null
        }
      };

      // 等待请求完成，获取响应数据
      const response = await apiClient.post('/route', requestData);
      return response.data; // 直接返回服务端响应的实际数据
    } catch (error) {
      // 统一捕获并处理请求错误
      console.error('请求失败:', error.response?.data || error.message);
      throw error; // 抛出错误让调用方自行处理
    }
  }
};

// 组件内调用示例
// const loadRouteData = async () => {
//   try {
//     const routeData = await ApiService.fetchRoute();
//     console.log('获取到的路由数据:', routeData);
//     // 在这里处理数据渲染等逻辑
//   } catch (err) {
//     // 处理错误提示
//   }
// };
// loadRouteData();

Axios正确使用要点 #

• 复用请求实例：用axios.create配置全局baseURL、headers，避免重复编写相同配置
• 请求参数规范：
  • axios.post(url, data, config)：第二个参数是请求体数据，第三个是配置对象（如headers、URL参数等）
  • 直接传入JS对象作为data，Axios会自动设置Content-Type: application/json并转换为JSON字符串
• 异步逻辑处理：async函数内必须用await等待请求完成，否则无法获取实际响应结果
• 环境变量使用：React环境变量需以REACT_APP_为前缀，通过process.env读取，禁止硬编码敏感密钥
• 错误捕获：用try/catch包裹请求逻辑，通过error.response可获取服务端返回的错误详情
• 响应数据提取：服务端返回的实际数据在response.data中，通常直接使用该字段即可

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