目前nuxt3即将发布rc版本，跟nuxt2比还是有很大区别，使用了ts和vue3，nuxt3的使用下来，体验还是很不错的，那么如何在nuxt3里面封装一个http请求呢

相关文档：https://v3.nuxtjs.org/docs/usage/data-fetching;

新建一个http.ts

 

// 封装请求，2022-1-15 yzp
import { _AsyncData } from 'nuxt3/dist/app/composables/asyncData'

// 指定后端返回的基本数据类型
export interface ResponseConfig {
  code: number,
  status: number,
  data: any,
  msg: string
}
export interface ValueConfig {
  value: any,
  [x: string]: any,
}

const fetch = (url: string, options?: any): Promise<any> => {
  const { $config, $router } = useNuxtApp()
  const reqUrl = $config.baseURL + url
  // rc.5开始需要传一个唯一的key
  const key = JSON.stringify(options) + '_' + url
  return new Promise((resolve, reject) => {
    useFetch(reqUrl, { ...options, key }).then(({ data, error }: _AsyncData<any>) => {
      if (error.value) {
        reject(error.value)
        return
      }
      const value = data.value
      if (!value) {
        // 这里处理错误回调
        // reject(value)
        // $router.replace('/reject/' + value.status)
      } else {
        resolve(value)
      }
    }).catch((err: any) => {
      console.log(err)
      reject(err)
    })
  })
}

export default new class Http {

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

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

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

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

 

使用方法：composables/index.ts，api接口放在这个里面会自动导入函数

 

import Http from '@/utils/http'

/**
 * 获取标签
 */
export const useGetTags = (params?: { size?: number, page?: number }) => {
  return Http.get('/app/v1/tags', params)
}

 

在页面或者组件中使用：

 

<script lang="ts" setup>
const tags = await useGetTags()
console.log(tags)
</script>