位置: IT常识 - 正文

vue3项目中封装axios(vue3封装axios)

编辑:rootadmin
vue3项目中封装axios

推荐整理分享vue3项目中封装axios(vue3封装axios),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3封装组件,vue项目axios封装,vue3封装axios,vue3封装axios,vue项目封装api,vue3项目中封装过哪些组件,vue3项目中封装过哪些组件,vue3项目中封装过哪些组件,内容如对您有帮助,希望把文章链接给更多的朋友!

目前前端最流行的网络请求库还是axios,所以对axios的封装很有必要,此次基于vue3+ts的环境下。

axios的基本使用import axios from 'axios'// console.log('adh')axios.get('http://XXX.xxx.xxx.xxx:8000/home').then((res) => { console.log(res.data)})

axios.get()会返回一个Promise对象,所以可以用.then获取返回的数据。

axios.all()方法axios.all([ axios.get('http://httpbin.org/get').then((res) => { console.log(res.data) }), axios.post('http://httpbin.org/post').then((res) => { console.log(res.data) })])axios一些基本配置

在axios中,有一些默认配置,它们是存在于axios.defaults中的,比如我们经常会用到的baseURL、timeout属性

axios.defaults.baseURL = 'http://httpbin.org'axios.defaults.timeout = 10000axios的拦截器

在平常的使用中,我们经常需要对axios请求进行拦截以处理一些特殊情况,如获取token、处理异常等,这时候我们就需要使用axios的拦截器()。

axios.interceptors.request.use( (config) => { return config }, (error) => { return error })axios.interceptors.response.use( (res) => { console.log(res.data) }, (error) => { return error })

如上,axios.interceptors.request是对请求的拦截,此时可以为请求添加headers,添加token等操作,二axios.interceptors.response则是对请求的返回进行拦截,在此处我们可以统一返回的数据结构以及对错误进行一些统一的处理

封装axios-封装基础属性vue3项目中封装axios(vue3封装axios)

首先,我们先确认一下基本思路,我们把主要的逻辑封装成一个类,然后编写一个出口文件,将该类导出,需要注意的是,往这个类中传入哪些参数,诚然,我们可以直接在类中定义诸如BASE_URL、timeout、interceptors等axios的属性或方法,但是为了今后的可适配性更高,我们应该尽量的把可配置的属性作为变量传入我们欲封装的类中,下面先进行一个基本的封装:

// 封装类import axios from 'axios'import { AxiosInstance, AxiosRequestConfig } from 'axios'class ZWRequest { instance: AxiosInstance constructor(config: AxiosRequestConfig) { this.instance = axios.create(config) } request(config: AxiosRequestConfig): void { this.instance.request(config).then((res) => { console.log(res) // 此处能成功打印出结果代表成功 }) }}export default ZWRequest// 出口文件index.tsimport ZWRequest from './request'import { BASE_URL, timeout } from './request/config'const zwRequest = new ZWRequest({ baseURL: BASE_URL, // 配置参数 timeout: timeout // 配置参数})export default zwRequest// 在main.ts中测试import ZWRequest from './service/index.ts'ZWRequest.request({ url: '/post', method: 'POST'})封装拦截器

上面的封装可以传入BASE_URL、timeout等一些基础属性,但是对于拦截器interceptors还是不能实现配置,所以下一步我们改造一下使其可以传入拦截器:

// 封装类import axios from 'axios'import { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'// 自建一个用于匹配interceptors的类型interface ZWRequestInterceptors { requestInterceptor?: (config: AxiosRequestConfig) => AxiosRequestConfig // 这是个函数类型 requestErrorInterceptor?: (error: any) => any responseInterceptor?: (config: AxiosResponse) => AxiosResponse responseErrorInterceptor?: (error: any) => any}/** 再新建一个一个类型继承AxiosRequestConfig类型,并在其中设立一个属性,该属性对应上一步建立的类型,如此,我们就可以用这个类型来代替封装类的constructor()函数传入的参数类型了,在此基础上,完成对拦截器参数的传入。*/interface ZWRequestConfig extends AxiosRequestConfig { interceptors?: ZWRequestInterceptors}class ZWRequest { instance: AxiosInstance interceptors?: ZWRequestInterceptors constructor(config: ZWRequestConfig) { this.instance = axios.create(config) this.interceptors = config.interceptors this.instance.interceptors.request.use( this.interceptors?.requestInterceptor, this.interceptors?.requestErrorInterceptor ) this.instance.interceptors.response.use( this.interceptors?.responseInterceptor, this.interceptors?.responseErrorInterceptor ) } request(config: ZWRequestConfig): void { this.instance.request(config).then((res) => { console.log(res) }) }}export default ZWRequest// 出口函数index.ts/** 我们可以在出口函数中同意规定拦截器的形式以及相应的处理,这样做的好处是如果我们想再生成一个可用的axios对象,如ZWRequest2,而且想实现与ZWRequest不一样的拦截方法,那么就只需要在该页面再新创建一个对象即可 */import ZWRequest from './request'import { BASE_URL, timeout } from './request/config'const zwRequest = new ZWRequest({ baseURL: BASE_URL, timeout: timeout, interceptors: { requestInterceptor: (config) => { console.log('发送请求成功11', config) return config }, responseInterceptor: (res) => { console.log('返回成功11', res) return res } }})const zwRequest2 = new ZWRequest({ baseURL: BASE_URL, timeout: timeout, interceptors: { requestInterceptor: (config) => { console.log('发送请求成功22', config) return config }, responseInterceptor: (res) => { console.log('返回成功22', res) return res } }})export default zwRequest// main.ts中实验ZWRequest.request({ url: '/post', method: 'POST'})ZWRequest2.request({ url: '/post', method: 'POST'})封装公用的拦截器

上面的封装中,拦截器是由每个实例传入的,但是有时候我们就是想所有的实例都拥有共同的拦截器,那么我们就需要在axios封装类里面添加共有的拦截器了(实例传入的拦截器也并不会被取消),只需要在axios封装类中添加以下代码即可实现全局的拦截:

this.instance.interceptors.request.use( (config) => { console.log('共有的请求时成功拦截') return config }, (error) => { console.log('共有的请求时失败拦截') return error } )this.instance.interceptors.response.use( (res) => { console.log('共有的返回时成功的拦截') return res }, (error) => { console.log('共有的返回时失败的拦截') return error })对单个请求传入拦截器

其实上面对拦截器的封装已经基本可以满足平时的开发需求了,但是如果你想更灵活些,比如每个请求都可以传入自己的拦截器,那么请往下看,如果我们需要再请求时传入拦截器,那么就需要看看我们是怎么调用的。目前,我们采用ZWRequest.request(config)的方式调用axios请求,很显然,在封装类中,config参数的类型是:AxiosRequestConfig,这个类型很显然不能传入拦截器参数。

request(config: AxiosRequestConfig): void { this.instance.request(config).then((res) => { console.log(res) }) }

所以为了能够往request方法中传入拦截器参数,我们需要将AxiosRequestConfig类型化成我们上面新建立的类型ZWRequestConfig,这样就可以从单个请求处传入各自的拦截器了。

// 改造axios封装类中的request方法request(config: ZWRequestConfig): void { // 对单独请求传来的拦截器进行处理 if (config.interceptors?.requestInterceptor) { config = config.interceptors?.requestInterceptor(config) } this.instance.request(config).then((res) => { if (config.interceptors?.responseInterceptor) { res = config.interceptors?.responseInterceptor(res) } console.log(res) })}// 在main.ts中进行测试ZWRequest.request({ url: '/post', method: 'POST', interceptors: { requestInterceptor: (config) => { console.log('单独请求的请求成功拦截') return config }, responseInterceptor: (res) => { console.log('单独请求的响应成功拦截') return res } }})

可以正常打印,成功!

对request请求方法封装

上面其实已经对request请求进行了大部分的封装了,但是此时的各种返回还局限在类里面,我们在main.ts中是无法拿到的,那么想要拿到返回值,我们就需要进一步操作,其实就是利用promise将结果返回出来:

// 对request方法的改造request<T>(config: ZWRequestConfig): Promise<T> { return new Promise((resolve, reject) => { // 对单独请求传来的拦截器进行处理 if (config.interceptors?.requestInterceptor) { config = config.interceptors?.requestInterceptor(config) } if (config.showLoading === false) { // 代表该请求不想显示加载动画 this.showLoading = config.showLoading } this.instance .request<any, T>(config) .then((res) => { // 每次请求返回后将showLoading的值改为默认值,以免被这次请求穿的配置影响下一次请求的加载动画显示 this.showLoading = DEFAULT_LOADING if (config.interceptors?.responseInterceptor) { res = config.interceptors?.responseInterceptor(res) } resolve(res) console.log(res) }) .catch((error) => { console.log(error) this.showLoading = DEFAULT_LOADING reject(error) }) })}// 在main.ts中实验interface dataType { data: any returnCode: string success: boolean}ZWRequest.request<dataType>({ url: '/home/multidata', method: 'GET' // showLoading: false}).then((res) => { console.log(res.data) console.log(res.returnCode) console.log(res.success)})

由上可见,其实操作很简单,那么接下来即使利用已经写好的request方法来些各种常用的请求调用方法了,就不多做赘述了,代码如下:

get<T>(config: ZWRequestConfig): Promise<T> {return this.request<T>({ ...config, method: 'GET' })}post<T>(config: ZWRequestConfig): Promise<T> { return this.request<T>({ ...config, method: 'POST' })}delete<T>(config: ZWRequestConfig): Promise<T> { return this.request<T>({ ...config, method: 'DELETE' })}

以上就是本人对axios的全部封装,完毕!

本文链接地址:https://www.jiuchutong.com/zhishi/295860.html 转载请保留说明!

上一篇:我把这一年学的 CSS 知识点精炼总结成了一篇文档(这一年我学会了)

下一篇:JavaScript:实现复制粘贴剪切功能(js实现dialog)

  • 华为手机自带万能钥匙在哪(华为手机自带万能遥控器下载)

    华为手机自带万能钥匙在哪(华为手机自带万能遥控器下载)

  • 小米10pro和小米10相比较(小米10pro和小米10手机壳通用吗)

    小米10pro和小米10相比较(小米10pro和小米10手机壳通用吗)

  • 怎么通过快手号查电话号(怎么通过快手号找到微信号)

    怎么通过快手号查电话号(怎么通过快手号找到微信号)

  • 快速打开任务栏管理器的快捷键(快速打开任务栏图标)

    快速打开任务栏管理器的快捷键(快速打开任务栏图标)

  • 为什么咪咕音乐听歌不要钱(为什么咪咕音乐流量用不了)

    为什么咪咕音乐听歌不要钱(为什么咪咕音乐流量用不了)

  • 怎样删除oppo手机使用所有应用记录时间(怎样删除OPPO手机隐私空间的密码)

    怎样删除oppo手机使用所有应用记录时间(怎样删除OPPO手机隐私空间的密码)

  • 华为mate30pro卡槽如何打开(华为mate30pro卡槽1和卡槽2)

    华为mate30pro卡槽如何打开(华为mate30pro卡槽1和卡槽2)

  • 计算机中1kb等于什么(计算机中1KB等于)

    计算机中1kb等于什么(计算机中1KB等于)

  • 腾讯视频绑定微信怎么在其他手机登录(腾讯视频绑定微信号的怎么给别人登)

    腾讯视频绑定微信怎么在其他手机登录(腾讯视频绑定微信号的怎么给别人登)

  • 苹果手机冲不上电(苹果手机充不上电开不开机怎么办)

    苹果手机冲不上电(苹果手机充不上电开不开机怎么办)

  • bnd-al00是什么机型(bnd-al00是华为什么型号的手机)

    bnd-al00是什么机型(bnd-al00是华为什么型号的手机)

  • ios10什么时候发布的(ios10发布时间)

    ios10什么时候发布的(ios10发布时间)

  • cpu风扇卡扣按不下去(cpu风扇卡扣怎么换)

    cpu风扇卡扣按不下去(cpu风扇卡扣怎么换)

  • 三星双清和恢复出厂设置有区别吗(三星手机双清后还能恢复吗)

    三星双清和恢复出厂设置有区别吗(三星手机双清后还能恢复吗)

  • 字母下标怎么打(表格中字母下标怎么打)

    字母下标怎么打(表格中字母下标怎么打)

  • 怎么关闭苹果app扣款(怎么关闭苹果app自动更新)

    怎么关闭苹果app扣款(怎么关闭苹果app自动更新)

  • iphone我的名片怎么改(iphone我的名片怎么设置)

    iphone我的名片怎么改(iphone我的名片怎么设置)

  • word上标和下标怎么打(word上标和下标怎么设置)

    word上标和下标怎么打(word上标和下标怎么设置)

  • 尾注和脚注位置的区别(尾注和脚注的)

    尾注和脚注位置的区别(尾注和脚注的)

  • 手机串号是哪个(手机串号是哪个码)

    手机串号是哪个(手机串号是哪个码)

  • 微信视频怎么发快手上(微信视频怎么发到视频号)

    微信视频怎么发快手上(微信视频怎么发到视频号)

  • 华为duaaloo是什么型号(dual是华为什么型号)

    华为duaaloo是什么型号(dual是华为什么型号)

  • z87主板支持ddr4吗(z87主板支持m2固态吗)

    z87主板支持ddr4吗(z87主板支持m2固态吗)

  • 快手的隐私用户什么意思(快手的隐私用户怎么关闭)

    快手的隐私用户什么意思(快手的隐私用户怎么关闭)

  • 荣耀20怎么设置24小时制(荣耀新手机如何设置)

    荣耀20怎么设置24小时制(荣耀新手机如何设置)

  • 【今日七夕】Love locker on a red stripe hanging in a temple in Chengdu, China © Philippe LEJEANVRE/Getty Images(今日七夕祝福语)

    【今日七夕】Love locker on a red stripe hanging in a temple in Chengdu, China © Philippe LEJEANVRE/Getty Images(今日七夕祝福语)

  • 收到所得税汇算退税计入补贴收入
  • 股东利润分配怎么做账
  • 城市维护建设税优惠政策
  • 稳岗返还入什么科目
  • 介质申报和网络申报的区别
  • 加计抵减怎么入账
  • 租赁合同印花税计算
  • 确认销售收入的重要依据是什么
  • 销售发票红冲会计分录怎么做?
  • 研发折旧会计分录
  • 应收票据会计分录怎么做
  • 用友为啥会出现期初调整
  • 个税申报表在哪下载打印
  • 安装工程发票怎么开
  • 小规模纳税人补缴增值税
  • 无票费用如何做凭证分录
  • 机票抵扣增值税需要什么凭证
  • 个税纳税期数如何规定的 怎么选择
  • 增值税抵扣需要哪些附件
  • 教培机构房租占比
  • 属于项目的一个实例
  • 笔记本电脑的触摸板怎么用右键
  • 收到老板图片
  • 劳务公司开具劳务费发票
  • 股权转让个税怎么缴纳
  • 电脑dat文件怎么打开
  • 工作组只能看到自己
  • neoDVD.exe - neoDVD是什么进程 有什么用
  • 现在学修电脑怎么样
  • 物业费开增值税专用发票
  • 预计利润表中的销售成本如何计算
  • 农产品收购发票管理办法
  • 没有报税盘
  • uniapp自定义tabbar功能
  • 外经证有效期到了,可以续吗
  • vue2计算属性和vue3的计算属性的区别
  • redux入门教程
  • 利润表没有本月金额只有本年累计可以吗
  • 施工图审查费属于什么费用类别
  • 增值税发票作废后怎么处理
  • php接口怎么调用
  • python中if语句的用法
  • 进项发票抵扣税率
  • 软件企业该怎么发展起来
  • 税率与征收率是怎么回事
  • 分组计数什么意思
  • t3怎么查资产负债表
  • 去年的成本发票做错了需要补税吗
  • 结构性存款现金流量表流入里放在哪里
  • 在税收方面属于什么领域
  • 工程施工的保险费的账务处理
  • 委外加工半成品入库的会计分录
  • 未使用的固定资产计提折旧计入什么科目
  • 以前年度损益调整属于哪类科目
  • 排污费征收范围包括
  • 设备5年直线法计提折旧怎么做?
  • 销项负数发票如何作废
  • 会计的总目标是什么意思
  • 企业预付账款怎么做账
  • sql优化的一般步骤
  • soft version
  • linux系统中的用户大体可分为三组
  • window8系统安装步骤
  • mac系统字体大小设置
  • Linux Mint 5 XFCE Community Edition RC1 (BETA 025) 本月17日开始发布
  • WIN7系统如何禁止特定软件在线升级
  • win8 休眠
  • 简述opengl的编程步骤
  • 阿里大于短信验证接口
  • jquery html函数
  • jquery的用法
  • jquery改变img的src
  • JavaScript中Textarea滚动条不能拖动的解决方法
  • js数组操作的常用方法有哪些
  • 出租车票如何验真
  • 不动产租赁和经营租赁发票的区别
  • 增值税是否在利润表反映
  • 年度申报个人所得税专项扣除多填了怎么办
  • 北京市工会会员卡免费公园有哪些
  • 湖北低保查询网站官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设