React-Redux项目中如何获取Axios异步调用的实际返回数据

你遇到的现象本质是两个JavaScript异步规则叠加导致的：

• 所有被async关键字修饰的函数，返回值永远是Promise对象，不会直接返回函数内部return的原始值
• 你在同步代码流里直接调用函数、立刻打印结果的时候，axios的异步网络请求还没走完流程，这个Promise自然停留在Pending状态，根本拿不到实际数据

另外你整合的代码里还有一处笔误：前面定义的是独立的getUser函数，最后调用时写的是users.getUser(1)，如果没有提前定义users对象挂载这个方法，这段代码还会直接抛出引用错误。

方案1：用async/await等待Promise完成后取数（最贴近你现有代码的写法） #

直接把调用逻辑包裹在async函数里，等待Promise resolve后再打印、处理数据，同时补上请求异常捕获：

// 修正引用错误，执行获取用户的逻辑
const loadUser = async () => {
  try {
    // 等待请求完成，拿到实际的axios响应对象
    const userRes = await getUser(1)
    // 注意：axios返回的响应结构里，真正的业务数据存在res.data字段下
    console.log('实际接口返回的用户数据：', userRes.data)
    // 这里就可以把数据dispatch到Redux store里，适配你的技术栈
    // dispatch({ type: 'SET_CURRENT_USER', payload: userRes.data })
  } catch (error) {
    // 统一捕获网络错误、接口报错、token失效等异常
    console.error('获取用户信息失败：', error)
  }
}

// 执行加载逻辑
loadUser()

方案2：用Promise.then()链式调用取数（适合不想写额外async函数的场景） #

直接在调用处接上Promise的回调，等请求完成后在回调里处理数据：

getUser(1)
  .then((userRes) => {
    console.log('实际接口返回的用户数据：', userRes.data)
    // 同样可以接Redux dispatch逻辑
  })
  .catch((error) => {
    console.error('请求异常：', error)
  })

这类带异步请求的逻辑，不要直接在模块顶层同步执行：

• 放到React组件的useEffect钩子（函数组件）或者生命周期方法（类组件）里执行，避免模块加载时就触发请求
• 放到Redux的异步action（比如基于redux-thunk实现的thunk action）里写，拿到数据后再dispatch更新store，和你的技术栈匹配度更高
• 注意你当前的axios实例是在模块加载时从localStorage取的token，如果后续token更新了，这个实例里的Authorization头不会自动同步，必要时可以加请求拦截器动态取最新token

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