使用Typescript对Axios举行二次封装

概要

在web开发中，常需要使用axios举行网络哀求为了防止axios不再维护时出现了bug因此为了增加项目的安全性对axios举行二次封装，当axios不再维护即可选择换一个库敏捷重新使用项目
团体架构流程

本文的axios二次封装采用TS的技术栈，通过对request的细节封装后，对get、patch等方法封装，对每一个类创建的实例和每一次的单一哀求的拦截器都举行的封装，增强了原生axios的功能
代码细节

• 封装代码 - 在service文件夹下的request文件夹下的index.ts文件
  

1. import axios from "axios";
2. import type { AxiosInstance, AxiosRequestConfig, AxiosRequestHeaders, AxiosResponse, CreateAxiosDefaults, InternalAxiosRequestConfig } from "axios";
5. // 针对CreateAxiosDefaults配置进行扩展
6. // 使其可以添加对应的拦截器来使用
7. interface DCRequestConfig<T = AxiosResponse> extends CreateAxiosDefaults{
8.     interceptors?: {
9.         requestSuccessFn?: (config: InternalAxiosRequestConfig) => InternalAxiosRequestConfig
10.         requestFailureFn?: (err: any) => any
11.         responseSuccessFn?: (res: T) => T
12.         responseFailureFn?: (err: any) => any
13.     }
14. }
16. // 定义单一网络请求时的类型
17. interface newDCRequestConfig<T = AxiosResponse> extends AxiosRequestConfig{
18.     interceptors?: {
19.         requestSuccessFn?: (config: any) => any
20.         requestFailureFn?: (err: any) => any
21.         responseSuccessFn?: (res: T) => T
22.         responseFailureFn?: (err: any) => any
23.     }
24. }
26. class DCRequest {
27.   public instance: AxiosInstance;
29.   // request实例 => axios实例
30.   constructor(config: DCRequestConfig) {
31.     this.instance = axios.create(config);
33.     // 每个instance实例都添加拦截器
34.     // 请求成功和失败的拦截
35.     this.instance.interceptors.request.use(config => {
36.         console.log('全局的请求成功拦截');
37.         return config
38.     }, err => {
39.         console.log('全局请求失败的拦截');
40.         return err
41.     })
43.     // 响应成功和失败的拦截
44.     this.instance.interceptors.response.use(res => {
45.         console.log('全局的响应成功拦截');
46.         return res.data
47.     }, err => {
48.         console.log('全局的响应失败的拦截');
49.         return err
50.     })
52.     // 针对特定的request实例添加拦截器
53.     if(config.interceptors){
54.         this.instance.interceptors.request.use(
55.             config.interceptors.requestSuccessFn,
56.             config.interceptors.requestFailureFn
57.         )
58.         this.instance.interceptors.response.use(
59.             config.interceptors.responseSuccessFn,
60.             config.interceptors.responseFailureFn
61.         )
62.     }
63.   }
65.   // 封装网络请求方法
66.   request<T = any>(config: newDCRequestConfig<T>) {
67.     if(config.interceptors?.requestSuccessFn) {
68.         // 单次请求成功的拦截
69.         config = config.interceptors.requestSuccessFn(config)
70.     }
72.     return new Promise<T>((resolve, reject) => {
73.         this.instance.request<any, T>(config).then(res => {
74.             // 单次响应成功的拦截
75.             if(config.interceptors?.responseSuccessFn){
76.                 res = config.interceptors.responseSuccessFn(res)
77.             }
78.             resolve(res)
79.         }).catch(err => {
80.             reject(err)
81.         })
82.     })
83.   }
85.   get<T = any>(config: newDCRequestConfig<T>) {
86.     return this.request({ ...config, method: "GET" })
87.   }
88.   post<T = any>(config: newDCRequestConfig<T>) {
89.     return this.request({ ...config, method: "POST" })
90.   }
91.   delete<T = any>(config: newDCRequestConfig<T>) {
92.     return this.request({ ...config, method: "DELETE" })
93.   }
94.   patch<T = any>(config: newDCRequestConfig<T>) {
95.     return this.request({ ...config, method: "PATCH" })
96.   }
97. }
99. export default DCRequest;

复制代码

• 使用二次封装的axios - 在service文件夹下的index.ts文件
  

1. import DCRequest from "./request";
3. const dcRequest = new DCRequest({
4.     baseURL: 'http://codercba.com:8000',
5.     timeout: 10000,
6.     interceptors: {
7.         requestSuccessFn: (config) => {
8.             console.log('单一请求成功的拦截');
9.             
10.             return config
11.         },
12.         requestFailureFn: (err) => {
13.             return err
14.         },
15.         responseSuccessFn: (res) => {
16.             console.log('单一响应成功的拦截');
17.             return res
18.         },
19.         responseFailureFn: (err) => {
20.             return err
21.         }
22.     }
23. })
25. export default dcRequest

复制代码

• 在service文件夹下的module文件夹下的home.ts
  

1. import dcRequest from "..";
3. interface IInfo {
4.     data: any
5.     returnCode: string,
6.     success: boolean
7. }
9. dcRequest.request<IInfo>({
10.     url: '/home/multidata',
11.     interceptors: {
12.         requestSuccessFn: (config) => {
13.             console.log('请求成功的拦截');
14.             
15.             return config
16.         },
17.         responseSuccessFn: (res) => {
18.             console.log('应成功的拦截');
19.             return res
20.         }
21.     }
22. }).then(res => {
23.     console.log(res);
24. })

复制代码

小结

作者水平有限，由于拦截器的 InternalAxiosRequestConfig中的headers范例不兼容于AxiosRequestConfig的hedaers哀求，想过在界说newDCRequestConfig范例时，把headers范例转化为InternalAxiosRequestConfig中的headers范例，但始终觉得不当，望有大神可以提供方法
  假如本文对你有资助，麻烦点个赞和关注，谢谢

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。