封装Axios请求后调用getUsers方法返回undefined问题排查

• agent.js 中的 getUsers 方法没有返回值：axios.get() 本身会生成Promise实例，但你没有把这个Promise（或者Promise链）通过return暴露出去，函数默认返回值就是undefined，这是最直接的报错原因。
• 异步调用逻辑错误：就算补全了return，也不能直接同步赋值拿到接口结果，axios请求是异步操作，返回的是Promise对象，需要通过then或者async/await才能拿到异步返回的实际数据。
• React组件使用规范问题：在React函数组件中直接调用接口会导致每次组件渲染都重复触发请求，应该把请求逻辑放到useEffect钩子中，拿到结果后存入useState来驱动视图渲染。

第一步：修正agent.js的请求方法 #

给每个请求方法补充return，把Promise实例暴露出去：

//agent.js
import axios from 'axios';

axios.defaults.baseURL = 'https://localhost:5001/api';

const requests = {
  createUser: (payload) => {
    return axios.post('/users/create', payload);
  },
  getUsers: () => {
    // 返回整个Promise链，后续才能拿到then中return的结果
    return axios.get('/users').then((r) => {
      console.log(r.data); //输出json响应
      return r.data;
    });
  }
};

const agent = {
  requests
};

export default agent;

第二步：修正React组件的异步调用逻辑 #

//reactComponent.js
import { useEffect, useState } from 'react';
import agent from './agent';

function Userlist() {
  // 用state存储用户列表，驱动视图更新
  const [users, setUsers] = useState([]);

  useEffect(() => {
    // 定义异步请求函数，在钩子内调用
    const fetchUsers = async () => {
      const userData = await agent.requests.getUsers();
      console.log(userData); // 此时可拿到正确的接口返回值
      setUsers(userData);
    };
    fetchUsers();
  }, []); // 空依赖数组保证仅在组件首次挂载时触发一次请求

  // 示例：用拿到的users渲染列表
  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  )
}

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