为何在React应用中使用Axios调用无法获取数据？

你的代码结构本身没有语法错误，但数据获取失败大概率是以下几类原因，逐个排查即可：

1. 后端服务状态异常 #

• 直接在浏览器地址栏访问 http://localhost:8080/api/v1/employees，确认后端服务是否正常启动、接口是否能返回数据
• 检查后端端口是否和代码中的8080一致，避免端口号写错

2. 跨域访问限制 #

如果React项目默认启动端口（3000）和后端8080不同，浏览器会触发跨域拦截：

• 后端需配置CORS支持：比如Spring Boot项目在控制器类上添加@CrossOrigin注解，或全局配置跨域规则
• 也可在React项目的package.json中添加代理配置：

  "proxy": "http://localhost:8080"
  

  之后把API地址改成相对路径：/api/v1/employees

3. 未正确处理Axios的Promise #

getEmployees返回的是Promise对象，调用时必须通过.then()/.catch()或async/await处理：

// 组件中调用示例
import EmployeeService from './EmployeeService';

// 方式1：使用.then()/.catch()
EmployeeService.getEmployees()
  .then(res => {
    console.log('获取到的数据:', res.data);
    // 后续数据处理逻辑
  })
  .catch(err => {
    console.error('请求失败:', err.response?.data || err.message);
  });

// 方式2：使用async/await
async function fetchEmployees() {
  try {
    const res = await EmployeeService.getEmployees();
    console.log('获取到的数据:', res.data);
  } catch (err) {
    console.error('请求失败:', err.response?.data || err.message);
  }
}

务必添加错误捕获，否则控制台可能看不到关键报错信息。

4. 后端接口配置错误 #

• 确认后端接口的路径是/api/v1/employees，且请求方法为GET
• 用Postman或curl测试接口，验证是否能正常返回数据：

  curl http://localhost:8080/api/v1/employees
  

5. Axios依赖或配置问题 #

• 检查是否已安装Axios：执行npm install axios确保依赖存在
• 可创建Axios实例并添加基础配置，避免潜在问题：

  import axios from 'axios';
  
  const axiosInstance = axios.create({
    baseURL: "http://localhost:8080/api/v1",
    timeout: 5000, // 设置5秒超时
  });
  
  class EmployeeService {
    getEmployees(){
      return axiosInstance.get("/employees");
    }
  }
  
  const obj = new EmployeeService()
  export default obj
  

排查时重点查看浏览器控制台的Network和Console标签：Network标签可查看请求状态码（如404、500、CORS错误），Console标签能看到具体报错信息，帮你快速定位问题。

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