Nuxt3中useFetch与axios的差异及迁移时调用异常问题排查

核心原因 #

useFetch 和 axios 的设计逻辑完全不同：axios 是纯 HTTP 客户端，每次调用都会发起新请求；而 useFetch 是 Nuxt3 专为服务端渲染/静态优化设计的组合式函数，默认启用了缓存机制，会复用相同请求的结果，不会每次都向服务器发起请求。结合你遇到的场景，具体问题可能出在这几点：

1. 默认缓存策略触发
   useFetch 默认会根据请求的 URL、方法、参数生成缓存键，只要这些内容不变，就会直接返回缓存数据，不会发起新请求。如果你的认证头（authHeader）没有被纳入缓存键的计算，哪怕用户登录状态变化，也会复用旧缓存。

2. 生命周期使用不当
   useFetch 是组合式 API 函数，应该在 setup() 或 <script setup> 中直接调用，而不是放在 mounted 钩子中。rc6 版本中在 mounted 里调用 useFetch 可能导致缓存逻辑异常，无法正确触发请求。

3. 早期版本 Bug
   你使用的 Nuxt3 rc6 是非常早期的候选版本，useFetch 存在不少缓存相关的 bug，比如缓存键计算错误、客户端缓存失效异常等，这些问题在后续稳定版中已经修复。

解决办法 #

1. 正确使用组合式 API 写法 #

改用 <script setup> 语法，直接调用 useFetch：

<script setup>
const store = useAuth()
const { data: sensibleInformation } = await useFetch('http://dev.malt.fr/api/secured/admin', {
  method: 'get',
  headers: store.authHeader()
})
</script>

2. 手动指定唯一缓存键 #

如果请求的认证头会变化（比如不同用户登录），需要手动设置 key 参数，确保每个用户/会话的请求都有唯一标识：

<script setup>
const store = useAuth()
const authToken = store.authHeader()['Authorization'] // 提取唯一标识
const { data: sensibleInformation } = await useFetch('http://dev.malt.fr/api/secured/admin', {
  method: 'get',
  headers: store.authHeader(),
  key: `admin-data-${authToken}` // 用token作为缓存键的一部分
})
</script>

3. 禁用缓存或强制刷新 #

如果不需要缓存，每次都要发起新请求，可以设置 cache: false（rc6 版本支持，后续稳定版可改用 cache: { maxAge: 0 }）；也可以通过 refresh() 方法在特定时机强制刷新：

<script setup>
const store = useAuth()
const { data: sensibleInformation, refresh } = useFetch('http://dev.malt.fr/api/secured/admin', {
  method: 'get',
  headers: store.authHeader(),
  cache: false
})

// 页面激活时强制刷新数据
onActivated(() => {
  refresh()
})
</script>

4. 升级 Nuxt3 到稳定版 #

尽快升级到 Nuxt3 稳定版，rc6 的很多已知问题已经被修复，包括 useFetch 的缓存逻辑异常。

内容的提问来源于stack exchange，提问作者Hugo Lassiège