nuxt3 api接口请求封装

修改 nuxt.config.ts

代理接口地址，测试环境正式环境都可以这样代理

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/api/**': { proxy: `${process.env.NUXT_BASE_URL}/api/**` },
    },
  },
})

.env 中设置 NUXT_BASE_URL=https://api.xxx.com

在 composables 文件夹下新建 useRequest.ts 文件，用来封装请求

// useRequest.ts
import type { UseFetchOptions } from 'nuxt/app'
import { defu } from 'defu'

export function useRequest<T>(url: string, options: UseFetchOptions<T> = {}) {
  const userAuth = useCookie('token')

  const defaults: UseFetchOptions<T> = {
    key: url,
    headers: userAuth.value ? { Authorization: `Bearer ${userAuth.value}` } : {},
  }

  const params = defu(options, defaults)

  return useFetch(url, params)
}

组件中使用

const { data } = await useRequest(`/api/products`)