在nuxt3里useFetch封装一个api接口http请求

2022-03-31 16:54
椰子皮
2392
4
10
nuxt

在nuxt3里useFetch封装一个api接口http请求

11月16日nuxt3.0已正式发布,本文做了一些调整

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

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

 

新建一个http.ts

以下是基于rc.8以上版本增加了createError,错误可以在error.vue中展示

import { hash } from 'ohash'

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

const fetch = (url: string, options?: any): Promise<any> => {
  // const { $config } = useNuxtApp()
  // const { VITE_API_HOST } = $config.public
  const { public: { VITE_API_HOST } } = useRuntimeConfig() // 3.0正式版环境变量要从useRuntimeConfig里的public拿
  const reqUrl = VITE_API_HOST + url // 你的接口地址
  // 不设置key,始终拿到的都是第一个请求的值,参数一样则不会进行第二次请求
  const key = hash(JSON.stringify(options) + url)
  // 如果需要统一加参数可以options.params.token = 'xxx'
  return new Promise((resolve, reject) => {
    useFetch(reqUrl, { ...options, key }).then(({ data, error }) => {
      if (error.value) {
        reject(error.value)
        return
      }
      const value: ResOptions<any> = 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) => {
    return fetch(url, { method: 'get', params })
  }

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

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

  delete = (url: string, body?: 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>

 

咱们还可以更加模块化一些

新建一个api文件夹,新建一个index.ts,其他的根据业务模块新建文件,index.ts用于导出其他模块,如图:

 

比如我想把文章相关的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)
  }
}

 

api/index.ts导出这些模块:

import articleApi from '@/api/article'

export default {
  articleApi,
}

 

composables/index.ts中:

import api from '@/api/index'

export const useApi = () => api

 

然后页面中使用:

<script lang="ts" setup>
const { articleApi } = useApi()

const tags = await articleApi.getTags({ page: 1, size: 50 })
console.log(tags)

</script>

 

 

支付宝微信
10
关注公众号获取更多内容
nuxt3+vue3+typescript里写一个全局提示框toast插件
结合lazyload实现文章页里面的图片预加载
共有 4 条评论
发表评论
  • 菜鸟#10100
    3周前
    湖南省长沙市岳麓区
    Windows 10
    Chrome

    报这个是怎么回事?nuxt instance unavailable

    椰子皮2022-03-27 回复@菜鸟
    多少版本?最好是最新的版本
  • Sonder#10085
    2022-07-06 18:40
    未知
    Win10

    基础问题,刚刚的问题解决了。是baseurl没弄好~~

  • tsin#10083
    2022-06-13 19:52
    未知
    Win10

    请求接口在控制台看不到返回数据是怎么回事呢 显示的是无法加载响应数据,返回的状态代码是200

    椰子皮2022-03-27 回复@tsin
    浏览器控制台看到不,在终端看,加q群868170958交流
  • joker#10080
    2022-04-12 00:01
    未知
    Win10

    这样取的到值吗?试了一下 在页面上打印data 为null ,是我哪里有问题吗

    椰子皮2022-03-27 回复@joker
    .then上面的data?请求成功会有的,如果是value.data,那个是我自己这边返回的数据格式
总共 4
  • 1
不支持canvas
春季
夏季
秋季
冬季
暗黑
简约
小清新