useSWR结合Axios返回整个响应而非response.data问题求助

核心原因 #

你遇到的问题本质是两个useSWR钩子对应的fetcher函数返回值处理逻辑不一致，和axios实例、async/await本身无关：

• 其中一个fetcher明确对axios响应做了拆解，返回了response.data（或更内层的response.data.result）；
• 另一个fetcher直接返回了axios的完整响应对象，导致useSWR拿到的是整个响应结构。

解决办法 #

1. 统一fetcher的返回格式 #

封装一个全局复用的fetcher函数，确保所有useSWR调用都用这个函数，强制返回你需要的数据层级：

// 统一的fetcher，直接返回接口返回的result数据
const fetcher = async (url) => {
  const response = await axiosInstance.get(url);
  // 根据你的接口结构，返回最终需要的层级
  return response.data.result;
};

// 所有useSWR调用都用这个fetcher
const { data } = useSWR('/api/xxx', fetcher);
// 此时data直接就是你要的result数据，无需再层层拆解

2. 适配不同接口的响应结构 #

如果部分接口的响应结构有差异，可以给fetcher加参数来指定返回层级，或者在fetcher内做判断：

const fetcher = async (url, responseKey = 'result') => {
  const response = await axiosInstance.get(url);
  return response.data[responseKey];
};

// 普通接口用默认值
const { data } = useSWR('/api/normal', fetcher);
// 特殊接口指定返回层级
const { data: specialData } = useSWR('/api/special', (url) => fetcher(url, 'data'));

3. 检查现有代码的fetcher逻辑 #

排查两个出问题的useSWR调用：

• 确认是不是其中一个用了内联的axios调用且没处理返回值，比如：

  // 错误示例：直接返回axios响应对象
  const { data } = useSWR('/api/xxx', async (url) => axiosInstance.get(url));
  

  改成和另一个钩子一致的处理逻辑，加上return res.data.result即可。

内容的提问来源于stack exchange，提问作者m3.b