$fetch和useFetch指南

布莱克2025-12-27 13:29已编辑

Tip:文章封面与内容无关，作者旅游时拍摄，因为没什么值得把四季都错过！🌊 🌵 🌴 ✈️

Nuxt中$fetch和useFetch的用法

维度	`$fetch`	`useFetch`	选择建议
SSR 支持	❌ 需手动处理	✅ 自动处理	需要 SSR → `useFetch`
响应式	❌ 纯数据	✅ 响应式对象	需要响应式 → `useFetch`
缓存去重	❌ 无	✅ 自动处理	重复请求多 → `useFetch`
加载状态	❌ 需手动管理	✅ 内置 `pending`	需要加载状态 → `useFetch`
错误处理	✅ try-catch	✅ 内置 `error`	简单错误 → `$fetch`，复杂 → `useFetch`
性能优化	✅ 灵活控制	✅ 自动优化	精细控制 → `$fetch`，便捷 → `useFetch`
使用场景	事件触发、API 封装	页面数据初始化	用户操作 → `$fetch`，页面数据 → `useFetch`

页面初始化数据（必须用 useFetch）

用户交互触发（推荐 $fetch）

useFetch

const { data, pending, error, refresh } = useFetch('/api/data', {
  // 核心配置
  key: 'unique-data-key', // 唯一标识，用于缓存和去重
  method: 'GET', // 请求方法
  query: { page: 1, limit: 20 }, // 查询参数
  body: { name: 'test' }, // 请求体（POST/PUT）
  
  // 响应式配置
  watch: [page, searchTerm], // 监听响应式数据变化
  immediate: true, // 是否立即执行
  
  // SSR 配置
  server: true, // 是否在服务端执行
  lazy: false, // 是否懒加载
  
  // 数据处理
  default: () => ({ items: [] }), // 默认值
  transform: (data) => {
    // 数据转换
    return data.items.map(item => ({
      ...item,
      formattedDate: new Date(item.createdAt).toLocaleDateString()
    }));
  },
  
  // 拦截器
  onRequest({ request, options }) {
    // 添加认证头
    const token = useCookie('token');
    if (token.value) {
      options.headers = {
        ...options.headers,
        Authorization: `Bearer ${token.value}`
      };
    }
  },
  
  onResponse({ response }) {
    // 响应处理
    console.log('响应接收:', response._data);
  },
  
  onRequestError({ error }) {
    // 请求错误处理
    console.error('请求失败:', error);
  },
  
  onResponseError({ response }) {
    // 响应错误处理
    if (response.status === 401) {
      navigateTo('/login');
    }
  },
  
  // 性能优化
  dedupe: true, // 去重相同请求
  pick: ['id', 'name'], // 只选择特定字段
  // timeout: 5000, // 超时设置
  // retry: 3 // 重试次数
});