useAsyncData与useFetch差异：首次加载不触发请求原因排查

核心问题：不必要的 await 关键字 #

你的 useAsyncData 调用中使用了 await，这是导致首次加载/硬刷新时不触发 API 调用的关键原因。useAsyncData 设计为在 setup 上下文同步调用，它会立即返回一个包含状态、数据的响应式对象，并自动触发数据请求（除非设置 lazy: true）。添加 await 会打乱 Nuxt 的数据获取生命周期处理逻辑，尤其是在初始页面加载阶段。

修正后的代码 #

移除 await 关键字即可恢复正常：

const {
  status,
  data: airlines,
  error,
  refresh
} = useAsyncData(
  'airlines',
  () =>
    $fetch('/api/airlines/list', {
      params: queryItems
    }),
  {
    transform: (airlines: ListResult<Airline>) => transformer(airlines)
  }
)

简化版本同样需要移除 await：

const { status, data: airlines, error, refresh } = useAsyncData('airlines', () => $fetch('/api/airlines/list'))

其他可能的排查点 #

• 确保 key 唯一性：'airlines' 作为 useAsyncData 的缓存 key，需确保在整个应用中唯一，避免缓存冲突导致数据不更新。
• 检查参数的响应式：如果 queryItems 是响应式数据（ref/computed），确保它在初始加载时已正确赋值，否则 params 为空可能导致请求未触发或返回空数据。
• 排查全局拦截逻辑：检查是否有全局 middleware、插件或 $fetch 拦截器，可能在初始加载时阻止了 API 请求。

补充说明 #

useFetch 本质是 useAsyncData 的封装，两者功能等价，但 useFetch 内部已处理了异步逻辑，无需额外 await。而 useAsyncData 需遵循同步调用的设计，才能让 Nuxt 正确管理其数据获取生命周期。

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