为何$fetch在Nuxt3的asyncData()/fetch()中无法正常工作？

核心问题分析 #

你在asyncData中使用this.apiUrl是错误的——asyncData在服务器端或预渲染阶段执行，此时组件实例尚未创建，this上下文不存在，无法通过this访问组件属性或实例方法。而mounted是客户端钩子，组件实例已初始化，所以能正常使用this。另外，Nuxt3完全不兼容@nuxt/axios，无需安装该包，官方内置的$fetch（基于ofetch）足够满足需求。

分步解决方案 #

1. 配置API基础地址（可选但推荐）

在默认的nuxt.config.ts中配置公共运行时变量，方便全项目统一管理API地址：

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      // 替换为你的Laravel后端API实际地址
      apiBase: 'http://your-laravel-api-domain'
    }
  }
})

2. 修正asyncData写法（Nuxt2兼容写法）

通过asyncData的上下文参数获取$fetch和runtimeConfig，禁止使用this：

async asyncData({ $fetch, runtimeConfig }) {
  try {
    const apiUrl = `${runtimeConfig.public.apiBase}/api/get-list-of-industries`
    const response = await $fetch(apiUrl)
    console.log(response);
    // 返回数据供组件模板使用
    return { industries: response }
  } catch (error) {
    console.error('获取行业列表失败:', error);
    return { industries: [] }
  }
}

3. 推荐：使用Nuxt3组合式API（更适配SSR）

Nuxt3官方推荐使用<script setup>结合useFetch/useAsyncData实现SSR数据获取，这些API自动处理服务端/客户端数据同步、缓存等逻辑：

<script setup>
// 从运行时配置中获取API基础地址
const { public: { apiBase } } = useRuntimeConfig()

// 使用useFetch获取数据，自动支持SSR渲染
const { data: industries, error } = await useFetch('/api/get-list-of-industries', {
  baseURL: apiBase
})

// 错误处理
if (error.value) {
  console.error('获取行业列表失败:', error.value)
}
</script>

关键注意事项 #

• 彻底删除手动创建的nuxt.config.js，Nuxt3默认使用nuxt.config.ts，所有配置都应写在此文件中
• asyncData属于Nuxt2兼容写法，优先使用组合式API的useFetch/useAsyncData，功能更完善
• 若前端与后端域名不同，需确保Laravel后端配置了CORS规则，避免客户端请求跨域错误

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