Nuxt3 自定义请求封装

1. 定义Plugin

plugins/customFetch.js

import { sendRedirect } from 'h3'

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig()
  const isServer = import.meta.server
  const customFetch = $fetch.create({
    baseURL: config.public.baseApiPc,
    credentials: 'include',
    onRequestError({ error }) {
      $modal?.msgError(error.message)
      return Promise.reject(error)
    },
    async onResponse(context) {
      const { response } = context

      const code = response._data?.code ?? 200
      const msg = errors[code] || response._data?.msg || errors.default
      if (code === 401) {
        if (isServer) {
          const event = useRequestEvent(nuxtApp)
          return sendRedirect(event, '/login')
        }
        else {
          await nuxtApp.runWithContext(() => navigateTo(`/login`, { replace: true }))
        }
        return Promise.reject(msg)
      }
      else if (code !== 200) {
        $modal?.msgError(msg)
        return Promise.reject(msg)
      }
      else {
        return Promise.resolve(response._data.data || response._data)
      }
    },
    onResponseError(context) {
      const { response } = context
      $modal?.msgError(`http状态 ${response.status}${response.statusText}`)
      return Promise.reject(response.statusText)
    },
  })
  return {
    provide: {
      customFetch,
    },
  }
})

2. 封装Composable

composables/useCustomFetch.js

export function useClientFetch(url, options) {
  return useNuxtApp().$customFetch(url, options)
}

3. Api封装

api/xx.js

export function getDD(){
    return useClientFetch('/getdd')
}

4.页面调用

根据需求选择合适的方式

let { data } = await useAsyncData('getDD',()=>getDD())

5.参考

# Use Custom Fetch Composable