如何为Nuxt3的$fetch添加默认参数与请求头？

方法一：通过Nuxt插件创建带默认配置的$fetch实例（推荐） #

这种方式直接利用ohmyfetch的create方法生成带默认配置的实例，完全保留原生$fetch的类型提示，无需手动处理泛型传递。

步骤1：创建Nuxt插件 #

在plugins/fetch.ts中编写插件：

export default defineNuxtPlugin(() => {
  // 替换为你实际获取JWT的方式（如Pinia store、localStorage）
  const getAuthToken = () => {
    const authStore = useAuthStore()
    return authStore.accessToken
  }

  // 创建自定义$fetch实例，设置默认请求头
  const $api = $fetch.create({
    headers: {
      // 动态注入认证头，token不存在时自动忽略
      ...(getAuthToken() && { Authorization: `Bearer ${getAuthToken()}` })
    }
  })

  // 可选：添加请求拦截器处理动态token场景（如token过期刷新）
  $api.interceptors.request.use((options) => {
    const token = getAuthToken()
    if (token) {
      options.headers = {
        ...options.headers,
        Authorization: `Bearer ${token}`
      }
    }
    return options
  })

  // 将自定义实例注入Nuxt全局
  return {
    provide: {
      api: $api
    }
  }
})

步骤2：全局使用$api #

在组件或组合式函数中直接调用，类型提示和原生$fetch完全一致：

// 自动继承API路由的返回类型（若API路由有类型定义）
const response = await useNuxtApp().$api('/api/user')

// 也可手动指定泛型
const typedResponse = await useNuxtApp().$api<{ id: number; name: string }>('/api/user')

方法二：手动封装$fetch并保留类型提示 #

如果需要更灵活的封装逻辑，手动封装时需确保传递泛型并保留原FetchOptions类型：

// composables/useApi.ts
import type { FetchOptions } from 'ohmyfetch'

export const useApi = () => {
  const getAuthToken = () => {
    const authStore = useAuthStore()
    return authStore.accessToken
  }

  const $api = async <T = any>(url: string, options?: FetchOptions) => {
    return $fetch<T>(url, {
      // 合并自定义默认头与传入的请求头
      headers: {
        ...(getAuthToken() && { Authorization: `Bearer ${getAuthToken()}` }),
        ...options?.headers
      },
      // 合并其他传入选项
      ...options
    })
  }

  return { $api }
}

使用封装后的$api #

const { $api } = useApi()
// 同样保留完整类型提示
const user = await $api<{ id: number; name: string }>('/api/user')

关键说明 #

• $fetch.create()生成的实例会完全继承原生$fetch的类型系统，包括Nuxt自动生成的API路由返回类型。
• 拦截器适合处理动态场景（如token过期后自动刷新重试），静态默认配置适合固定请求头。
• 只要正确传递泛型或利用Nuxt自动类型生成，两种方式都不会丢失类型提示。

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