React组件调用封装的axios异步方法返回undefined问题排查

问题根因 #

1. axiosCall函数未返回Promise对象
   你定义的axiosCall内部执行了axios.get（本身返回Promise实例），但没有将该Promise对外返回，导致函数执行后返回值为undefined，外部await undefined自然无法拿到接口返回结果，这也是你能在service层的then里打印数据、但组件层拿不到返回值的核心原因。
2. 组件内异步逻辑冗余混乱
   你在组件中嵌套了两层async函数，且对已经await后的结果重复执行await操作，属于无意义的冗余逻辑，也容易引发异常。
3. setTimeout不生效的关联原因
   通常和异步逻辑异常抛出未捕获、组件卸载后定时器执行触发React警告阻断后续逻辑、或者useEffect依赖项配置错误/严格模式重复执行导致定时器被提前清除有关。

修复步骤 #

1. 修复network.services.js中的axiosCall函数，添加return返回Promise #

axiosCall = (axiosURL) => {
  // const axiosURL = "https://api.github.com/user"
  // 新增return把axios请求的Promise返回给调用方
  return axios.get(axiosURL, {
      headers: {
        'Authorization': `qwdvryjutmnevw`,
      }
  }).then((res) => {
      console.log(res.data);
      return res.data;
  }).catch((error) => {
      throw error.message;
      // console.error(error);
      // toast.error(error.message);
  })
}

2. 简化组件内的异步调用逻辑，删除冗余嵌套 #

const getData = async () => {
  try {
    // 直接await axiosCall返回的Promise即可拿到结果
    const result = await networkServices.axiosCall("/api/v1/calendars");
    console.log(result); // 此处可正常打印接口返回数据
    // 如果需要存state直接在这里操作即可：setYourState(result)
    return result;
  } catch (err) {
    console.error('请求失败：', err)
  }
}

// 需后续处理返回值的话直接调用后接then即可
getData().then(res => {
  if(res) console.log('最终处理结果', res)
})

3. 修复setTimeout不生效问题 #

如果在useEffect中使用定时器，必须添加清理逻辑，避免组件卸载后定时器执行触发异常：

useEffect(() => {
  const timer = setTimeout(() => {
    // 你的定时器逻辑
  }, 1000)
  // 组件卸载时清除定时器
  return () => clearTimeout(timer)
}, [/* 你的依赖项，按实际需求填写 */])

如果开启了React严格模式，开发环境下useEffect会执行两次，对应调整定时器的创建/清理逻辑即可正常运行。

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