nuxt3 如何对useFetch进行封装，并做请求拦截和响应拦截

Nuxt.js 3.x 中，可以利用 Nuxt的插件 (plugins) 或自定义 hooks 对 `useFetch` 进行封装，同时添加请求拦截和响应拦截功能。`useFetch` 是基于 Nuxt 插件 `@nuxtjs/composition-api-fetch` 提供的一个基础的 API 请求工具。以下是一个简单的封装示例：

import { useFetch } from '@nuxtjs/composition-api-fetch'
import { onMounted, onError, onCatch } from 'vue3 CompositionAPI'

// 创建一个自定义 fetch hook
export const useCustomFetch = async (url, options = {}) => {
  // 创建一个新的 fetch 函数，带有全局的拦截器
  const fetchWithInterceptors = async (...args) => {
    try {
      // 使用原始的 fetch 并在内部应用拦截器
      const response = await useFetch(url, options)
      
      // 拦截响应（例如处理错误、转换数据等）
      const processedResponse = handleResponse(response)

      return processedResponse
    } catch (error) {
      // 拦截请求错误
      await onError(error)
      throw error
    }
  }

  // 在组件挂载时初始化请求
  onMounted(() => {
    fetchWithInterceptors()
  })

  // 添加全局的响应拦截器
  onCatch(fetchWithInterceptors)

  // 返回包装后的 fetch 函数
  return fetchWithInterceptors
}

// 示例：处理响应函数
function handleResponse(response) {
  if (response.status >= 400) {
    throw new Error(`Request failed with status ${response.status}`)
  }
  return response.data
}

// 使用封装的 fetch 在组件内
export default {
  setup() {
    const fetchData = useCustomFetch('https://api.example.com/data')
    return { fetchData }
  },
}

在这个例子中，我们创建了一个新的 `fetchWithInterceptors` 函数，它首先执行原始的 `useFetch` 调用，然后在其内部处理拦截。`onMounted` 和 `onCatch` 分别用于请求在组件挂载时立即发起以及全局的错误处理。