Nuxt3请求封装数据封装

新建utils\http.ts

import { hash } from 'ohash'

// 后端返回的数据类型
export interface ResOptions<T> {
  data?: T
  code?: number
  msg?: string
}

/**
 * api请求封装
 * @param { String } url 请求地址
 * @param { Object } options useFtech第二个参数
 * @param { Object } headers 自定义header头, 单独设置headers区分请求参数，也好设置类型
 */
const fetch = (url: string, options?: any, headers?: any): Promise<any> => {

  const { public: { VITE_API_HOST } } = useRuntimeConfig() // 3.0正式版环境变量要从useRuntimeConfig里的public拿

  const reqUrl = VITE_API_HOST + url // 你的接口地址
  // console.log(NUXT_PUBLIC_API_MOCK)
  // 不设置key，始终拿到的都是第一个请求的值，参数一样则不会进行第二次请求
  const key = hash(JSON.stringify(options) + url)

  // 可以设置默认headers例如
  const customHeaders = { token: useCookie('token').value, ...headers }

  return new Promise((resolve, reject) => {
    useFetch(reqUrl, { ...options, key, headers: customHeaders }).then(({ data, error }) => {
      if (error.value) {
        reject(error.value)
        return
      }
      console.log(data)
      const value = data.value
      // console.log('useFetchResData: ', value)
      if (!value) {
        // 这里处理错你自定义的错误，例如code !== 1
        throw createError({
          statusCode: 500,
          statusMessage: reqUrl,
          message: '自己后端接口的报错信息',
        })
      } else {
        resolve(value)
      }
    }).catch((err: any) => {
      console.log(err)
      reject(err)
    })
  })
}

export default class Http {

  get(url: string, params?: any, headers?: any): Promise<any> {
    return fetch(url, { method: 'get', params }, headers)
  }

  post (url: string, params?: any, headers?: any): Promise<any> {
    return fetch(url, { method: 'post', params }, headers)
  }

  put (url: string, params?: any, headers?: any): Promise<any> {
    return fetch(url, { method: 'put', params }, headers)
  }

  delete (url: string, params?: any, headers?: any): Promise<any> {
    return fetch(url, { method: 'delete', params }, headers)
  }
}

以文章为例

新建server\api\article.ts

import Http from '@/utils/http'

export default new class article extends Http {

  /**
   * 获取热门文章
   */
  getHot() {
    return this.get('/app/v1/article/hotView')
  }

  /**
   * 获取文章详情
   * @param { Number } id 文章id
   */
  getDetail(id: number) {
    return this.get('/app/v1/article/detail/' + id)
  }

  getList() {
    return this.get("/api/List")
  }
}

新建server\index.ts 导出articleApi 

import articleApi from '@/server/api/article'

export default {
  articleApi
}

在composables创建index.ts

import api from "@/server/index"

export  const useApi = () =>api

页面中调用

<script lang="ts" setup>
  useHead({
    title:'one',
    meta: [
      { hid: 'keywords', name: 'keywords', content: '前端, keywords' }
    ]
  })
const { articleApi } = useApi()
const tags = await articleApi.getList()
console.log(tags)
</script>