logo


  • 首页
  • 文章 
    • vue
    • app
    • node
    • 生活
    • 小程序
    • javascript
    • uniapp
  • 案例 
    • app
    • 小程序
    • pc
  • 相册
  • 友链
  • 留言
  • 微语
  • 关于

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

 2022-03-31
 椰子皮
 1
 255

目前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

  return new Promise((resolve, reject) => {
    useFetch(reqUrl, { ...options }).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(ref<any>(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 getTags = (params?: { size?: number, page?: number }) => {
  return Http.get('/app/v1/tags', params)
}

 

在页面或者组件中使用:

 

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

 

 


支付宝 微信
 2

nuxtvue
 uniapp 长按longpress之后touchend touchcancel不触发不生效
 nuxt3+vue3+typescript里写一个全局提示框toast插件
共有 1 条评论
 发表评论
  • 10080#
    joker
    joker
    •  2022-04-11
    •  Win10
    这样取的到值吗?试了一下 在页面上打印data 为null ,是我哪里有问题吗
    椰子皮
     椰子皮 2022-04-11 回复 @joker
    .then上面的data?请求成功会有的,如果是value.data,那个是我自己这边返回的数据格式



表情
 不支持canvas
椰子皮
椰子皮
觉得不错就点个赞吧
 226
 关注 公众号
1691 运行天数
76 今日pv
60 文章数量
 最近更新
 2022-03-31 08:59 更新了 文章
 在nuxt3里useFetch封装一个api接口http请求

 最新微语
  • 最近在使用eeg.js + vue3.0 2022-01-12
  • 把清新风格改为毛玻璃效果,虽然有点卡,但 2020-05-31
  • 本站春季主题已完成,大家觉得怎样。 2020-03-15
 最新评论
  • joker
    joker Win10 2022-04-11
    文章 这样取的到值吗?试了一下 在页面上打印data 为null ,是我哪里有问题吗
  • undefined
    undefined Win10 2022-02-21
    文章 h5也不支持keyboardheightchange
  • 自媒体运营
    自媒体运营 Win10 2021-12-09
    文章 不错,必须顶一下!
 最多点赞
 最多评论
  • vue3.0+typescript使用tinymce富文本编辑器
    vue3.0+typescript使用tinymce富文...
    2020-06-09 赞:23
  • 全新椰子皮博客版本介绍及说明。
    全新椰子皮博客版本介绍及说明。...
    2017-11-23 赞:20
  • vuex action 与mutations 的区别
    vuex action 与mutations 的区别...
    2018-06-24 赞:18
  • 让height:auto有过度效果
    让height:auto有过度效果...
    2017-12-22 赞:
  • css3使用transform: scale 元素出现偏移
    css3使用transform: scale 元素出现偏...
    2018-03-10 赞:
  • 结合lazyload实现文章页里面的图片预加载
    结合lazyload实现文章页里面的图片预加载...
    2017-10-05 赞:
 标签
前端 算法 uniapp javascript typescript 小程序 app vue nuxt node
 友情链接
申请
mashihuan Khari & Yaru 美好记忆 帅气的木木 大蒜博客 Aquan 快乐编程 fivewoods Paul 贺德强 太傅博客 梁巨才博客 jielin littlewin IT技术宅
首页 申请友链 关于本站
CopyRight © 2016-2021 - 椰子皮 - 浙ICP备16003960号