使用Typescript对Axios举行二次封装
概要在web开发中，常需要使用axios举行网络哀求为了防止axios不再维护时出现了bug因此为了增加项目的安全性对axios举行二次封装，当axios不再维护即可选择换一个库敏捷重新使用项目
团体架构流程
本文的axios二次封装采用TS的技术栈，通过对request的细节封装后，对get、patch等方法封装，对每一个类创建的实例和每一次的单一哀求的拦截器都举行的封装，增强了原生axios的功能
代码细节
[*]封装代码 - 在service文件夹下的request文件夹下的index.ts文件
import axios from "axios";
import type { AxiosInstance, AxiosRequestConfig, AxiosRequestHeaders, AxiosResponse, CreateAxiosDefaults, InternalAxiosRequestConfig } from "axios";
// 针对CreateAxiosDefaults配置进行扩展
// 使其可以添加对应的拦截器来使用
interface DCRequestConfig<T = AxiosResponse> extends CreateAxiosDefaults{
interceptors?: {
requestSuccessFn?: (config: InternalAxiosRequestConfig) => InternalAxiosRequestConfig
requestFailureFn?: (err: any) => any
responseSuccessFn?: (res: T) => T
responseFailureFn?: (err: any) => any
}
}
// 定义单一网络请求时的类型
interface newDCRequestConfig<T = AxiosResponse> extends AxiosRequestConfig{
interceptors?: {
requestSuccessFn?: (config: any) => any
requestFailureFn?: (err: any) => any
responseSuccessFn?: (res: T) => T
responseFailureFn?: (err: any) => any
}
}
class DCRequest {
public instance: AxiosInstance;
// request实例 => axios实例
constructor(config: DCRequestConfig) {
this.instance = axios.create(config);
// 每个instance实例都添加拦截器
// 请求成功和失败的拦截
this.instance.interceptors.request.use(config => {
console.log('全局的请求成功拦截');
return config
}, err => {
console.log('全局请求失败的拦截');
return err
})
// 响应成功和失败的拦截
this.instance.interceptors.response.use(res => {
console.log('全局的响应成功拦截');
return res.data
}, err => {
console.log('全局的响应失败的拦截');
return err
})
// 针对特定的request实例添加拦截器
if(config.interceptors){
this.instance.interceptors.request.use(
config.interceptors.requestSuccessFn,
config.interceptors.requestFailureFn
)
this.instance.interceptors.response.use(
config.interceptors.responseSuccessFn,
config.interceptors.responseFailureFn
)
}
}
// 封装网络请求方法
request<T = any>(config: newDCRequestConfig<T>) {
if(config.interceptors?.requestSuccessFn) {
// 单次请求成功的拦截
config = config.interceptors.requestSuccessFn(config)
}
return new Promise<T>((resolve, reject) => {
this.instance.request<any, T>(config).then(res => {
// 单次响应成功的拦截
if(config.interceptors?.responseSuccessFn){
res = config.interceptors.responseSuccessFn(res)
}
resolve(res)
}).catch(err => {
reject(err)
})
})
}
get<T = any>(config: newDCRequestConfig<T>) {
return this.request({ ...config, method: "GET" })
}
post<T = any>(config: newDCRequestConfig<T>) {
return this.request({ ...config, method: "POST" })
}
delete<T = any>(config: newDCRequestConfig<T>) {
return this.request({ ...config, method: "DELETE" })
}
patch<T = any>(config: newDCRequestConfig<T>) {
return this.request({ ...config, method: "PATCH" })
}
}
export default DCRequest;
[*]使用二次封装的axios - 在service文件夹下的index.ts文件
import DCRequest from "./request";
const dcRequest = new DCRequest({
baseURL: 'http://codercba.com:8000',
timeout: 10000,
interceptors: {
requestSuccessFn: (config) => {
console.log('单一请求成功的拦截');
return config
},
requestFailureFn: (err) => {
return err
},
responseSuccessFn: (res) => {
console.log('单一响应成功的拦截');
return res
},
responseFailureFn: (err) => {
return err
}
}
})
export default dcRequest
[*]在service文件夹下的module文件夹下的home.ts
import dcRequest from "..";
interface IInfo {
data: any
returnCode: string,
success: boolean
}
dcRequest.request<IInfo>({
url: '/home/multidata',
interceptors: {
requestSuccessFn: (config) => {
console.log('请求成功的拦截');
return config
},
responseSuccessFn: (res) => {
console.log('应成功的拦截');
return res
}
}
}).then(res => {
console.log(res);
})
小结
作者水平有限，由于拦截器的 InternalAxiosRequestConfig中的headers范例不兼容于AxiosRequestConfig的hedaers哀求，想过在界说newDCRequestConfig范例时，把headers范例转化为InternalAxiosRequestConfig中的headers范例，但始终觉得不当，望有大神可以提供方法
假如本文对你有资助，麻烦点个赞和关注，谢谢
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]