Nuxt中async fetch数据正常但页面feed为空数组的问题

你的核心问题是：页面模板中{{ feed }}始终显示空数组，但fetch钩子内的console.log(this.feed)能打印正确数据，这大概率是方法名冲突或SSR环境兼容性导致的，以下是具体原因和解决办法：

核心原因 #

1. Fetch方法名冲突：你把组件的钩子方法命名为fetch，在方法内部调用的fetch()会优先指向当前组件的fetch方法本身，而非浏览器/环境的原生Fetch API，导致请求逻辑异常（即便你说控制台能打印数据，也可能是缓存或特殊环境下的例外情况）。
2. SSR环境不支持原生Fetch：Nuxt默认是服务端渲染（SSR）模式，Node.js环境中没有原生Fetch API，服务端执行请求会失败，导致初始渲染的页面feed为空；客户端hydrate时请求成功，但未触发页面更新。

解决办法 #

方案一：避免方法名冲突，明确调用原生Fetch #

将内部的请求调用改为window.fetch（仅客户端环境），同时调整category的赋值时机（避免组件初始化时路由未就绪）：

<template>
  <div>
    <h1>Feed - {{ category }}</h1>
    <p>{{ feed }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      feed: [],
      category: ''
    }
  },
  async fetch({ params }) {
    this.category = params.slug
    console.log('slug: ' + this.category)
    // 明确调用浏览器原生Fetch API，避免和组件方法名冲突
    const res = await window.fetch(`http://localhost:1337/api/getCategory/${params.slug}`)
    this.feed = await res.json()
    console.log(this.feed)
  },
  // 在created钩子中初始化category，确保路由就绪后赋值
  created() {
    this.category = this.$route.params.slug
  }
}
</script>

方案二：改用Nuxt专属的asyncData钩子（推荐用于页面数据预获取） #

asyncData是Nuxt专为页面数据预获取设计的钩子，返回的数据会直接合并到组件data中，天然兼容SSR：

<template>
  <div>
    <h1>Feed - {{ category }}</h1>
    <p>{{ feed }}</p>
  </div>
</template>

<script>
export default {
  async asyncData({ params }) {
    const category = params.slug
    console.log('slug: ' + category)
    // 若需兼容SSR，建议改用node-fetch或Nuxt的$axios
    const res = await fetch(`http://localhost:1337/api/getCategory/${params.slug}`)
    const feed = await res.json()
    console.log(feed)
    // 返回的数据会自动合并到组件data
    return { feed, category }
  }
}
</script>

方案三：使用Nuxt的$axios（最佳跨环境方案） #

先安装并配置@nuxtjs/axios模块，然后用它发起请求（自动兼容服务端和客户端）：

<template>
  <div>
    <h1>Feed - {{ category }}</h1>
    <p>{{ feed }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      feed: [],
      category: ''
    }
  },
  async fetch({ params, $axios }) {
    this.category = params.slug
    // 用$axios发起请求，自动处理SSR和客户端环境差异
    this.feed = await $axios.$get(`http://localhost:1337/api/getCategory/${params.slug}`)
    console.log(this.feed)
  },
  created() {
    this.category = this.$route.params.slug
  }
}
</script>

额外注意点 #

• 不要在data()中直接使用this.$route.params.slug，组件初始化阶段路由可能未完全就绪，容易导致数据为空。
• 若使用SSR模式，务必确保数据请求在服务端和客户端都能正常执行，$axios是最省心的选择。

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