数据获取

在 SPA 项目中，通常我们使用的是 axios 来请求数据的。

在 Nuxt 中，核心就是 3 个函数：

• $fetch
• useAsyncData
• useFetch

$fetch

$fetch 是 Nuxt 3 对 fetch API 的封装，提供更高级的功能，如自动处理 JSON、错误处理、拦截器等。

特点：

• 适用于 客户端和服务器端
• 支持拦截器（如 onRequest、onResponse）
• 手动管理状态
• 支持 $fetch.raw() 获取完整的 Response 对象

示例：

// example1
const data = await $fetch('/api/user')

// example2
const response = await $fetch.raw('/api/user') // 获取完整的 Response 对象
console.log(response.status, response._data)

useAsyncData

useAsyncData 适用于所有异步数据（不仅限于 HTTP 请求），它和 useFetch 类似，但更加通用，可以用于数据库查询、本地计算等。

特点：

• 适用于 客户端和服务器端
• 通用（不局限于 HTTP 请求，可用于任意异步数据）
• 手动指定 fetch 逻辑
• 自动缓存 数据
• 支持 lazy、key 机制，优化数据管理
• 支持 ref 响应式参数

示例：

// example1
const { data, pending, error } = useAsyncData('user', async () => {
  return await $fetch('/api/user')
})

// example2
const id = ref(1)
const { data, refresh } = useAsyncData(
  () => `user-${id.value}`,
  () => {
    return $fetch(`/api/user/${id.value}`)
  },
)

useFetch

useFetch 是 useAsyncData 的封装，专门用于 HTTP 请求，它结合了 $fetch 的能力，并且自动管理状态（loading、error、data）。

特点：

• 适用于 客户端和服务器端
• 自动缓存数据（默认在组件销毁后缓存）
• 自动管理状态（data、pending、error）
• 支持 ref 响应式参数
• 可与 Nuxt 服务器 API (/server/api) 配合

示例：

// example1
const { data, pending, error } = useFetch('/api/user')

// example2
const id = ref(1)
const { data, pending, error, refresh } = useFetch(() => `/api/user/${id.value}`, {
  default: () => ({ name: '默认用户' }),
  lazy: true, // 组件挂载时不立即请求
})