这里给大家分享我在网上总结出来的一些知识 ，希望对大家有所帮助
这里将其封装为一个类 ，而不是一个函数的原因是因为类可以创建多个实例 ，适用范围更广 ，封装性更强一些 。
拦截器封装
首先我们封装一下拦截器 ，这个拦截器分为三种：
类拦截器
实例拦截器
接口拦截器
接下来我们就分别实现这三个拦截器 。
类拦截器
类拦截器比较容易实现 ，只需要在类中对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) => AxiosRequestConfig
requestInterceptorsCatch?: (err: any) => any
// 响应拦截
responseInterceptors?: (config: AxiosResponse) => AxiosResponse
responseInterceptorsCatch?: (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
this.instance.interceptors.request.use(
(res: AxiosRequestConfig) => {
console.log(全局请求拦截器)
return res
},
(err: any) => err,
)
// 使用实例拦截器
this.instance.interceptors.request.use(
this.interceptorsObj?.requestInterceptors,
this.interceptorsObj?.requestInterceptorsCatch,
)
this.instance.interceptors.response.use(
this.interceptorsObj?.responseInterceptors,
this.interceptorsObj?.responseInterceptorsCatch,
)
// 全局响应拦截器保证最后执行
this.instance.interceptors.response.use(
// 因为我们接口的数据都在res.data下 ，所以我们直接返回res.data
(res: AxiosResponse) => {
console.log(全局响应拦截器)
return res.data
},
(err: any) => 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)
}
resolve(res)
})
.catch((err: any) => {
reject(err)
})
})
}
这里还存在一个细节 ，就是我们在拦截器接受的类型一直是AxiosResponse类型 ，而在类拦截器中已经将返回的类型改变 ，所以说我们需要为拦截器传递一个泛型 ，从而使用这种变化 ，修改types.ts中的代码 ，示例如下：
// index.ts
export interface RequestInterceptors {
// 请求拦截
requestInterceptors?: (config: AxiosRequestConfig) => AxiosRequestConfig
requestInterceptorsCatch?: (err: any) => any
// 响应拦截
responseInterceptors?: <T = AxiosResponse>(config: T) => T
responseInterceptorsCatch?: (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(实例请求拦截器)
return config
},
// 响应拦截器
responseInterceptors: result => {
console.log(实例响应拦截器)
return 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是不固定的 ，因为我们使用url做key ，只有在使用的时候才知道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存在保存取消请求方法和当前请求url
if (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)
}
resolve(res)
})
.catch((err: any) => {
reject(err)
})
.finally(() => {
url && this.delUrl(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(接口请求拦截)
return res
},
responseInterceptors(result) {
console.log(接口响应拦截)
return 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>
发送请求后 ，点击按钮即可实现对应的功能
本文转载于:
https://juejin.cn/post/7071518211392405541
如果对您有所帮助 ，欢迎您点个关注 ，我会定时更新技术文档 ，大家一起讨论学习 ，一起进步 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
