Nuxt3中useFetch获取的API JSON对象无法正常访问的问题

架构老林

2026-6-23

问题原因与解决方案：Nuxt3 useFetch无法正确解析响应

核心问题

你错误地将useFetch的返回值当作原始JSON字符串处理了。Nuxt3的useFetch方法返回的不是API响应的原始文本，而是一个包含响应状态、解析后数据的响应对象，直接对它执行JSON.parse会抛出错误。

具体分析

注释中能正常工作的代码，是直接使用了原始JSON字符串，JSON.parse可以正确将其转为对象；
而useFetch的返回值结构如下（简化版）：
```
{
  data: Ref(/* API返回的已解析对象 */),
  pending: Ref(false),
  error: Ref(null),
  // 其他属性
}
```
API返回的JSON已经被Nuxt自动解析为JavaScript对象，存储在data.value中，不需要再手动调用JSON.parse。

修正后的代码（选项式API）

<template>
  <div>
        {{ test }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      test: null
    };
  },
  async created() {
    try {      
      // 解构获取useFetch返回的data和error
      const { data, error } = await useFetch('https://reqres.in/api/users/2')

      // 处理请求错误
      if (error.value) {
        throw error.value
      }

      // 直接访问已解析的对象，无需JSON.parse
      this.test = data.value.data.id
    } catch (err) {
      console.log(err);
    }
  }
};
</script>

<style scoped></style>

更推荐的组合式API写法（Nuxt3官方推荐）

<template>
  <div>
    {{ test }}
  </div>
</template>

<script setup>
// 直接在setup中使用useFetch
const { data, error } = await useFetch('https://reqres.in/api/users/2')

// 安全获取id值
const test = data.value ? data.value.data.id : null

// 捕获错误
if (error.value) {
  console.error('请求出错:', error.value)
}
</script>