在项目中用ts封装axios,一次封装整个团队受益

2023-12-23 04:30

本文主要是介绍在项目中用ts封装axios,一次封装整个团队受益,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在这里插入图片描述

写在前面

虽然说Fetch API已经使用率已经非常的高了,但是在一些老的浏览器还是不支持的,而且axios仍然每周都保持2000多万的下载量,这就说明了axios仍然存在不可撼动的地位,接下来我们就一步一步的去封装,实现一个灵活、可复用的一个请求请发。

这篇文章封装的axios已经满足如下功能:

  • 无处不在的代码提示;
  • 灵活的拦截器;
  • 可以创建多个实例,灵活根据项目进行调整;
  • 每个实例,或者说每个接口都可以灵活配置请求头、超时时间等;
  • 取消请求(可以根据url取消单个请求也可以取消全部请求)。

基础封装

首先我们实现一个最基本的版本,实例代码如下:

// index.ts
import axios from 'axios'
import type { AxiosInstance, AxiosRequestConfig } from 'axios'

class Request {
// axios 实例
instance: AxiosInstance

constructor(config: AxiosRequestConfig) {
this.instance = axios.create(config)
}
request(config: AxiosRequestConfig) {
return this.instance.request(config)
}
}

export default Request
复制代码

这里将其封装为一个类,而不是一个函数的原因是因为类可以创建多个实例,适用范围更广,封装性更强一些。

拦截器封装

首先我们封装一下拦截器,这个拦截器分为三种:

  • 类拦截器
  • 实例拦截器
  • 接口拦截器

接下来我们就分别实现这三个拦截器。

类拦截器

类拦截器比较容易实现,只需要在类中对axios.create()创建的实例调用interceptors下的两个拦截器即可,实例代码如下:

// index.ts
constructor(config: AxiosRequestConfig) {this.instance = axios.create(config)

this.instance.interceptors.request.use(
(res: AxiosRequestConfig) => {
console.log(‘全局请求拦截器’)
return res
},
(err: any) => err,
)
this.instance.interceptors.response.use(
// 因为我们接口的数据都在res.data下,所以我们直接返回res.data
(res: AxiosResponse) => {
console.log(‘全局响应拦截器’)
return res.data
},
(err: any) => err,
)
}
复制代码

我们在这里对响应拦截器做了一个简单的处理,就是将请求结果中的.data进行返回,因为我们对接口请求的数据主要是存在在.data中,跟data同级的属性我们基本是不需要的。

实例拦截器

实例拦截器是为了保证封装的灵活性,因为每一个实例中的拦截后处理的操作可能是不一样的,所以在定义实例时,允许我们传入拦截器。

首先我们定义一下interface,方便类型提示,代码如下:

// types.ts
import type { AxiosRequestConfig, AxiosResponse } from 'axios'
export interface RequestInterceptors {// 请求拦截requestInterceptors?: (config: AxiosRequestConfig) => AxiosRequestConfigrequestInterceptorsCatch?: (err: any) => any// 响应拦截responseInterceptors?: (config: AxiosResponse) => AxiosResponseresponseInterceptorsCatch?: (err: any) => any
}
// 自定义传入的参数
export interface RequestConfig extends AxiosRequestConfig {interceptors?: RequestInterceptors
}
复制代码

定义好基础的拦截器后,我们需要改造我们传入的参数的类型,因为axios提供的AxiosRequestConfig是不允许我们传入拦截器的,所以说我们自定义了RequestConfig,让其继承与AxiosRequestConfig

剩余部分的代码也比较简单,如下所示:

// index.ts
import axios, { AxiosResponse } from 'axios'
import type { AxiosInstance, AxiosRequestConfig } from 'axios'
import type { RequestConfig, RequestInterceptors } from './types'

class Request {
// axios 实例
instance: AxiosInstance
// 拦截器对象
interceptorsObj?: RequestInterceptors

constructor(config: RequestConfig) {
this.instance = axios.create(config)
this.interceptorsObj = config.interceptors

<span class="hljs-variable language_">this</span>.<span class="hljs-property">instance</span>.<span class="hljs-property">interceptors</span>.<span class="hljs-property">request</span>.<span class="hljs-title function_">use</span>(<span class="hljs-function">(<span class="hljs-params">res: AxiosRequestConfig</span>) =&gt;</span> {<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'全局请求拦截器'</span>)<span class="hljs-keyword">return</span> res},<span class="hljs-function">(<span class="hljs-params">err: <span class="hljs-built_in">any</span></span>) =&gt;</span> err,
)<span class="hljs-comment">// 使用实例拦截器</span>
<span class="hljs-variable language_">this</span>.<span class="hljs-property">instance</span>.<span class="hljs-property">interceptors</span>.<span class="hljs-property">request</span>.<span class="hljs-title function_">use</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">interceptorsObj</span>?.<span class="hljs-property">requestInterceptors</span>,<span class="hljs-variable language_">this</span>.<span class="hljs-property">interceptorsObj</span>?.<span class="hljs-property">requestInterceptorsCatch</span>,
)
<span class="hljs-variable language_">this</span>.<span class="hljs-property">instance</span>.<span class="hljs-property">interceptors</span>.<span class="hljs-property">response</span>.<span class="hljs-title function_">use</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">interceptorsObj</span>?.<span class="hljs-property">responseInterceptors</span>,<span class="hljs-variable language_">this</span>.<span class="hljs-property">interceptorsObj</span>?.<span class="hljs-property">responseInterceptorsCatch</span>,
)
<span class="hljs-comment">// 全局响应拦截器保证最后执行</span>
<span class="hljs-variable language_">this</span>.<span class="hljs-property">instance</span>.<span class="hljs-property">interceptors</span>.<span class="hljs-property">response</span>.<span class="hljs-title function_">use</span>(<span class="hljs-comment">// 因为我们接口的数据都在res.data下,所以我们直接返回res.data</span><span class="hljs-function">(<span class="hljs-params">res: AxiosResponse</span>) =&gt;</span> {<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'全局响应拦截器'</span>)<span class="hljs-keyword">return</span> res.<span class="hljs-property">data</span>},<span class="hljs-function">(<span class="hljs-params">err: <span class="hljs-built_in">any</span></span>) =&gt;</span> err,
)

}
}
复制代码

我们的拦截器的执行顺序为实例请求→类请求→实例响应→类响应;这样我们就可以在实例拦截上做出一些不同的拦截,

接口拦截

现在我们对单一接口进行拦截操作,首先我们将AxiosRequestConfig类型修改为RequestConfig允许传递拦截器;然后我们在类拦截器中将接口请求的数据进行了返回,也就是说在request()方法中得到的类型就不是AxiosResponse类型了。

我们查看axios的index.d.ts中,对request()方法的类型定义如下:

// type.ts
request<T = any, R = AxiosResponse<T>, D = any>(config: AxiosRequestConfig<D>): Promise<R>;
复制代码

也就是说它允许我们传递类型,从而改变request()方法的返回值类型,我们的代码如下:

// index.ts
request<T>(config: RequestConfig): Promise<T> {return new Promise((resolve, reject) => {// 如果我们为单个请求设置拦截器,这里使用单个请求的拦截器if (config.interceptors?.requestInterceptors) {config = config.interceptors.requestInterceptors(config)}this.instance.request<any, T>(config).then(res => {// 如果我们为单个响应设置拦截器,这里使用单个响应的拦截器if (config.interceptors?.responseInterceptors) {res = config.interceptors.responseInterceptors<T>(res)}
    <span class="hljs-title function_">resolve</span>(res)}).<span class="hljs-title function_">catch</span>(<span class="hljs-function">(<span class="hljs-params">err: <span class="hljs-built_in">any</span></span>) =&gt;</span> {<span class="hljs-title function_">reject</span>(err)})

})
}
复制代码

这里还存在一个细节,就是我们在拦截器接受的类型一直是AxiosResponse类型,而在类拦截器中已经将返回的类型改变,所以说我们需要为拦截器传递一个泛型,从而使用这种变化,修改types.ts中的代码,示例如下:

// index.ts
export interface RequestInterceptors {// 请求拦截requestInterceptors?: (config: AxiosRequestConfig) => AxiosRequestConfigrequestInterceptorsCatch?: (err: any) => any// 响应拦截responseInterceptors?: <T = AxiosResponse>(config: T) => TresponseInterceptorsCatch?: (err: any) => any
}
复制代码

请求接口拦截是最前执行,而响应拦截是最后执行。

封装请求方法

现在我们就来封装一个请求方法,首先是类进行实例化示例代码如下:

// index.ts
import Request from './request'

const request = new Request({
baseURL: import.meta.env.BASE_URL,
timeout: 1000 * 60 * 5,
interceptors: {
// 请求拦截器
requestInterceptors: config => {
console.log(‘实例请求拦截器’)

  <span class="hljs-keyword">return</span> config
},
<span class="hljs-comment">// 响应拦截器</span>
<span class="hljs-attr">responseInterceptors</span>: <span class="hljs-function"><span class="hljs-params">result</span> =&gt;</span> {<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'实例响应拦截器'</span>)<span class="hljs-keyword">return</span> result
},

},
})
复制代码

然后我们封装一个请求方法, 来发送网络请求,代码如下:

// src/server/index.ts
import Request from './request'

import type { RequestConfig } from ‘./request/types’
interface YWZRequestConfig<T> extends RequestConfig {
data?: T
}
interface YWZResponse<T> {
code: number
message: string
data: T
}

/**

  • @description: 函数的描述
  • @interface D 请求参数的interface
  • @interface T 响应结构的intercept
  • @param {YWZRequestConfig} config 不管是GET还是POST请求都使用data
  • @returns {Promise}
    */
    const ywzRequest = <D, T = any>(config: YWZRequestConfig<D>) => {
    const { method = ‘GET’ } = config
    if (method === ‘get’ || method === ‘GET’) {
    config.params = config.data
    }
    return request.request<YWZResponse<T>>(config)
    }

export default ywzRequest
复制代码

该请求方式默认为GET,且一直用data作为参数;

取消请求

应评论区@Pic@Michaelee@Alone_Error的建议,这里增加了一个取消请求;关于什么是取消请求可以参考官方文档。

准备工作

我们需要将所有请求的取消方法保存到一个集合(这里我用的数组,也可以使用Map)中,然后根据具体需要去调用这个集合中的某个取消请求方法。

首先定义两个集合,示例代码如下:

// index.ts
import type {RequestConfig,RequestInterceptors,CancelRequestSource,
} from './types'

class Request {
/*
存放取消方法的集合

  • 在创建请求后将取消请求方法 push 到该集合中
  • 封装一个方法,可以取消请求,传入 url: string|string[]
  • 在请求之前判断同一URL是否存在,如果存在就取消请求
    /
    cancelRequestSourceList?: CancelRequestSource[]
    /

    存放所有请求URL的集合
  • 请求之前需要将url push到该集合中
  • 请求完毕后将url从集合中删除
  • 添加在发送请求之前完成,删除在响应之后删除
    */
    requestUrlList?: string[]

constructor(config: RequestConfig) {
// 数据初始化
this.requestUrlList = []
this.cancelRequestSourceList = []
}
}
复制代码

这里用的CancelRequestSource接口,我们去定义一下:

// type.ts
export interface CancelRequestSource {[index: string]: () => void
}
复制代码

这里的key是不固定的,因为我们使用urlkey,只有在使用的时候才知道url,所以这里使用这种语法。

取消请求方法的添加与删除

首先我们改造一下request()方法,它需要完成两个工作,一个就是在请求之前将url和取消请求方法push到我们前面定义的两个属性中,然后在请求完毕后(不管是失败还是成功)都将其进行删除,实现代码如下:

// index.ts
request<T>(config: RequestConfig): Promise<T> {return new Promise((resolve, reject) => {// 如果我们为单个请求设置拦截器,这里使用单个请求的拦截器if (config.interceptors?.requestInterceptors) {config = config.interceptors.requestInterceptors(config)}const url = config.url// url存在保存取消请求方法和当前请求urlif (url) {this.requestUrlList?.push(url)config.cancelToken = new axios.CancelToken(c => {this.cancelRequestSourceList?.push({[url]: c,})})}this.instance.request<any, T>(config).then(res => {// 如果我们为单个响应设置拦截器,这里使用单个响应的拦截器if (config.interceptors?.responseInterceptors) {res = config.interceptors.responseInterceptors<T>(res)}
    <span class="hljs-title function_">resolve</span>(res)}).<span class="hljs-title function_">catch</span>(<span class="hljs-function">(<span class="hljs-params">err: <span class="hljs-built_in">any</span></span>) =&gt;</span> {<span class="hljs-title function_">reject</span>(err)}).<span class="hljs-title function_">finally</span>(<span class="hljs-function">() =&gt;</span> {url &amp;&amp; <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">delUrl</span>(url)})

})
}
复制代码

这里我们将删除操作进行了抽离,将其封装为一个私有方法,示例代码如下:

// index.ts
/*** @description: 获取指定 url 在 cancelRequestSourceList 中的索引* @param {string} url* @returns {number} 索引位置*/
private getSourceIndex(url: string): number {return this.cancelRequestSourceList?.findIndex((item: CancelRequestSource) => {return Object.keys(item)[0] === url},) as number
}
/*** @description: 删除 requestUrlList 和 cancelRequestSourceList* @param {string} url* @returns {*}*/
private delUrl(url: string) {const urlIndex = this.requestUrlList?.findIndex(u => u === url)const sourceIndex = this.getSourceIndex(url)// 删除url和cancel方法urlIndex !== -1 && this.requestUrlList?.splice(urlIndex as number, 1)sourceIndex !== -1 &&this.cancelRequestSourceList?.splice(sourceIndex as number, 1)
}
复制代码

取消请求方法

现在我们就可以封装取消请求和取消全部请求了,我们先来封装一下取消全部请求吧,这个比较简单,只需要调用this.cancelRequestSourceList中的所有方法即可,实现代码如下:

// index.ts
// 取消全部请求
cancelAllRequest() {this.cancelRequestSourceList?.forEach(source => {const key = Object.keys(source)[0]source[key]()})
}
复制代码

现在我们封装一下取消请求,因为它可以取消一个和多个,那它的参数就是url,或者包含多个URL的数组,然后根据传值的不同去执行不同的操作,实现代码如下:

// index.ts
// 取消请求
cancelRequest(url: string | string[]) {if (typeof url === 'string') {// 取消单个请求const sourceIndex = this.getSourceIndex(url)sourceIndex >= 0 && this.cancelRequestSourceList?.[sourceIndex][url]()} else {// 存在多个需要取消请求的地址url.forEach(u => {const sourceIndex = this.getSourceIndex(u)sourceIndex >= 0 && this.cancelRequestSourceList?.[sourceIndex][u]()})}
}
复制代码

测试

测试请求方法

现在我们就来测试一下这个请求方法,这里我们使用www.apishop.net/提供的免费API进行测试,测试代码如下:

<script setup lang="ts">
// app.vue
import request from './service'
import { onMounted } from 'vue'

interface Req {
apiKey: string
area?: string
areaID?: string
}
interface Res {
area: string
areaCode: string
areaid: string
dayList: any[]
}
const get15DaysWeatherByArea = (data: Req) => {
return request<Req, Res>({
url: ‘/api/common/weather/get15DaysWeatherByArea’,
method: ‘GET’,
data,
interceptors: {
requestInterceptors(res) {
console.log(‘接口请求拦截’)

    <span class="hljs-keyword">return</span> res},<span class="hljs-title function_">responseInterceptors</span>(<span class="hljs-params">result</span>) {<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'接口响应拦截'</span>)<span class="hljs-keyword">return</span> result},
},

})
}
onMounted(async () => {
const res = await get15DaysWeatherByArea({
apiKey: import.meta.env.VITE_APP_KEY,
area: ‘北京市’,
})
console.log(res.result.dayList)
})
</script>
复制代码

如果在实际开发中可以将这些代码分别抽离。

上面的代码在命令中输出

接口请求拦截
实例请求拦截器
全局请求拦截器
实例响应拦截器
全局响应拦截器
接口响应拦截
[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
复制代码

测试取消请求

首先我们在.server/index.ts中对取消请求方法进行导出,实现代码如下:

// 取消请求
export const cancelRequest = (url: string | string[]) => {return request.cancelRequest(url)
}
// 取消全部请求
export const cancelAllRequest = () => {return request.cancelAllRequest()
}
复制代码

然后我们在app.vue中对其进行引用,实现代码如下:

<template><el-button@click="cancelRequest('/api/common/weather/get15DaysWeatherByArea')">取消请求</el-button><el-button @click="cancelAllRequest">取消全部请求</el-button><router-view></router-view>
</template>
<script setup lang="ts">
import request, { cancelRequest, cancelAllRequest } from './service'
</script>
复制代码

这篇关于在项目中用ts封装axios,一次封装整个团队受益的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/526715

相关文章

springboot项目如何开启https服务

《springboot项目如何开启https服务》:本文主要介绍springboot项目如何开启https服务方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录springboot项目开启https服务1. 生成SSL证书密钥库使用keytool生成自签名证书将

将Java项目提交到云服务器的流程步骤

《将Java项目提交到云服务器的流程步骤》所谓将项目提交到云服务器即将你的项目打成一个jar包然后提交到云服务器即可,因此我们需要准备服务器环境为:Linux+JDK+MariDB(MySQL)+Gi... 目录1. 安装 jdk1.1 查看 jdk 版本1.2 下载 jdk2. 安装 mariadb(my

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

springboot项目中常用的工具类和api详解

《springboot项目中常用的工具类和api详解》在SpringBoot项目中,开发者通常会依赖一些工具类和API来简化开发、提高效率,以下是一些常用的工具类及其典型应用场景,涵盖Spring原生... 目录1. Spring Framework 自带工具类(1) StringUtils(2) Coll

Spring Boot项目部署命令java -jar的各种参数及作用详解

《SpringBoot项目部署命令java-jar的各种参数及作用详解》:本文主要介绍SpringBoot项目部署命令java-jar的各种参数及作用的相关资料,包括设置内存大小、垃圾回收... 目录前言一、基础命令结构二、常见的 Java 命令参数1. 设置内存大小2. 配置垃圾回收器3. 配置线程栈大小

鸿蒙中Axios数据请求的封装和配置方法

《鸿蒙中Axios数据请求的封装和配置方法》:本文主要介绍鸿蒙中Axios数据请求的封装和配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1.配置权限 应用级权限和系统级权限2.配置网络请求的代码3.下载在Entry中 下载AxIOS4.封装Htt

Spring Boot项目中结合MyBatis实现MySQL的自动主从切换功能

《SpringBoot项目中结合MyBatis实现MySQL的自动主从切换功能》:本文主要介绍SpringBoot项目中结合MyBatis实现MySQL的自动主从切换功能,本文分步骤给大家介绍的... 目录原理解析1. mysql主从复制(Master-Slave Replication)2. 读写分离3.

SpringBoot中封装Cors自动配置方式

《SpringBoot中封装Cors自动配置方式》:本文主要介绍SpringBoot中封装Cors自动配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot封装Cors自动配置背景实现步骤1. 创建 GlobalCorsProperties

一文教你如何将maven项目转成web项目

《一文教你如何将maven项目转成web项目》在软件开发过程中,有时我们需要将一个普通的Maven项目转换为Web项目,以便能够部署到Web容器中运行,本文将详细介绍如何通过简单的步骤完成这一转换过程... 目录准备工作步骤一:修改​​pom.XML​​1.1 添加​​packaging​​标签1.2 添加

tomcat多实例部署的项目实践

《tomcat多实例部署的项目实践》Tomcat多实例是指在一台设备上运行多个Tomcat服务,这些Tomcat相互独立,本文主要介绍了tomcat多实例部署的项目实践,具有一定的参考价值,感兴趣的可... 目录1.创建项目目录,测试文China编程件2js.创建实例的安装目录3.准备实例的配置文件4.编辑实例的