TypeString封裝Axios場景

短暫又燦爛的 2022-06-23 07:39:21 阅读数:133

typestringaxios

寫在前面

雖然說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) => 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是不固定的,因為我們使用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存在保存取消請求方法和當前請求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://gsmany.com/2022/174/202206230656546890.html