Axios 之 ts 版本的哀求封装

1、安装

1. npm install axios

复制代码

文档链接：中文文档
2、常用封装

2.1 简单版本的封装

这里仅封装常用的 get、post、put、delete 几种方法
且只封装几种常见的报错提示
src/utils/request.ts

1. import axios, {
2.   AxiosError,
3.   AxiosInstance,
4.   AxiosResponse,
5.   InternalAxiosRequestConfig,
6. } from "axios";
8. const config = {
9.   baseURL: "http://localhost:3000/api",
10.   timeout: 10000,
11.   withCredentials: true,
12.   headers: {},
13. };
15. class RequestHttp {
16.   service: AxiosInstance;
18.   constructor() {
19.     this.service = axios.create(config);
21.     /**
22.      * @description 请求拦截器
23.      */
24.     this.service.interceptors.request.use(
25.       (config: InternalAxiosRequestConfig) => {
26.         return config;
27.       }
28.     );
30.     /**
31.      * @description 响应拦截器
32.      */
33.     this.service.interceptors.response.use(
34.       (response: AxiosResponse) => {
35.         const { data } = response;
36.         return data;
37.       },
39.       (error: AxiosError) => {
40.         const { response } = error;
41.         if (response) {
42.           checkStatus(response.status);
43.         }
44.         return false;
45.       }
46.     );
47.   }
49.   // 常用请求方法封装
50.   get(url: string, params?: object, _object = {}) {
51.     return this.service.get(url, { params, ..._object });
52.   }
53.   post(url: string, params?: object, _object = {}) {
54.     return this.service.post(url, params, _object);
55.   }
56.   put(url: string, params?: object, _object = {}) {
57.     return this.service.put(url, params, _object);
58.   }
59.   delete(url: string, params?: any, _object = {}) {
60.     return this.service.delete(url, { params, ..._object });
61.   }
62. }
64. /**
65. * @description: 校验网络请求状态码
66. * @param {Number} status
67. * @return void
68. */
69. const checkStatus = (status: number): void => {
70.   switch (status) {
71.       case 404:
72.           console.warn("资源不存在！");
73.           break;
74.       case 405:
75.           console.warn("请求方式错误！");
76.           break;
77.       case 500:
78.           console.warn("服务器异常！");
79.           break;
80.       default:
81.           console.warn("请求失败！");
82.   }
83. };
85. const request = new RequestHttp();
86. export default request;

复制代码

2.1 包罗多处置惩罚的封装

增加如下处置惩罚

• 哀求loading
  
• 取消哀求（CancelToken）
  
• 哀求效果的更细节处置惩罚
  

src/utils/request.ts

1. import { message } from "antd";
2. import axios, {
3.   AxiosInstance,
4.   InternalAxiosRequestConfig,
5.   AxiosResponse,
6.   AxiosError,
7. } from "axios";
8. import { store } from "@/redux";
9. import { ResponseCodeEnum } from "@/enums/httpEnum";
10. import { setToken } from "@/redux/modules/global";
11. import { ResultData } from "@/api/types/index.type";
12. import fullLoading from "./fullLoading";
13. import { AxiosCancel } from "./AxiosCancel";
15. const config = {
16.   baseURL: "http://localhost:3000/api",
17.   timeout: 5000,
18.   withCredentials: true,
19.   headers: {},
20. };
22. const axiosCancel = new AxiosCancel();
24. class RequestHttp {
25.   service: AxiosInstance;
27.   constructor() {
28.     this.service = axios.create(config);
30.     /**
31.      * @description 请求拦截器
32.      */
33.     this.service.interceptors.request.use(
34.       (config: InternalAxiosRequestConfig) => {
35.         console.log(config)
37.         // 打开全局 loading
38.         // 如不需要全局 loading，则第三个参数  { headers: { noLoading: true } }
39.         if(!config.headers.noLoading) {
40.           fullLoading.show();
41.         }
43.         // 将请求添加到 pending 中
44.         axiosCancel.addPending(config);
46.         // 这里如果需要添加token
47.         const token = store.getState().global.token; // 我这里用的是 react-redux + redux-toolkit
48.         config.headers["X-Access-Token"] = token;
50.         return config;
51.       }
52.     );
54.     /**
55.      * @description 响应拦截器
56.      */
57.     this.service.interceptors.response.use(
58.       (response: AxiosResponse) => {
59.         const { data, config } = response;
61.         // 关闭全局 loading
62.         if(!config.headers.noLoading) {
63.           fullLoading.hide();
64.         }
66.         // 请求结束，移除本次请求
67.         axiosCancel.removePending(config.url, config.method);
69.         // 接口返回 code 不是 200 的处理
70.         if (data.code !== ResponseCodeEnum.SUCCESS) {
71.           message.error(data.msg);
73.           // 登录失效，清除 token，跳转到登录页面
74.           if (data.code === ResponseCodeEnum.NOLOGIN) {
75.             store.dispatch(setToken(""));
76.             window.location.href = "/login";
77.           }
79.           return Promise.reject(data);
80.         }
81.         return data;
82.       },
84.       (error: AxiosError) => {
85.         fullLoading.hide();
87.         const { response } = error;
88.         if (response) {
89.           checkStatus(response.status);
90.         }
91.         return false;
92.       }
93.     );
94.   }
96.   // 常用请求方法封装
97.   get<T>(url: string, params?: object, _object = {}): Promise<ResultData<T>> {
98.     return this.service.get(url, { params, ..._object });
99.   }
100.   post<T>(url: string, params?: object, _object = {}): Promise<ResultData<T>> {
101.     return this.service.post(url, params, _object);
102.   }
103.   put<T>(url: string, params?: object, _object = {}): Promise<ResultData<T>> {
104.     return this.service.put(url, params, _object);
105.   }
106.   delete<T>(url: string, params?: any, _object = {}): Promise<ResultData<T>> {
107.     return this.service.delete(url, { params, ..._object });
108.   }
109. }
111. /**
112. * @description: 校验网络请求状态码
113. * @param {Number} status
114. * @return void
115. */
116. const checkStatus = (status: number): void => {
117.   switch (status) {
118.     case 404:
119.       message.error("资源不存在！");
120.       break;
121.     case 405:
122.       message.error("请求方式错误！");
123.       break;
124.     case 500:
125.       message.error("服务器异常！");
126.       break;
127.     default:
128.       message.error("请求失败！");
129.   }
130. };
132. const request = new RequestHttp();
133. export default request;

复制代码

取消哀求的封装：
src/utils/AxiosCancel.ts

1. import axios, { AxiosRequestConfig, Canceler } from "axios";
3. const cancelMap = new Map<string, Canceler>();
5. export class AxiosCancel {
6.   /**
7.    * 添加请求的 cancel
8.    * @param config
9.    */
10.   addPending(config: AxiosRequestConfig) {
11.     const { url, method } = config;
13.     if (!url || !method) return;
15.     // 处理同个api，同时多次请求的情况，先移除上一个
16.     this.removePending(url, method);
18.     const key = getCancelMapKey(url, method);
19.     config.cancelToken = new axios.CancelToken((cancel: Canceler) => {
20.       if (!cancelMap.has(key)) {
21.         cancelMap.set(key, cancel);
22.       }
23.     });
24.   }
26.   /**
27.    * 移除请求
28.    * @param url
29.    * @param method
30.    */
31.   removePending(url: string | undefined, method: string | undefined) {
32.     if (!url || !method) return;   
34.     const key = getCancelMapKey(url, method);
35.     const cancel = cancelMap.get(key);
36.     if (cancel) {
37.       cancel();
38.       cancelMap.delete(key);
39.     }
40.   }
42.   /**
43.    * 移除所有请求
44.    */
45.   removeAllPending() {
46.     cancelMap.forEach((cancel) => {
47.       cancel && cancel();
48.     });
49.     cancelMap.clear();
50.   }
51. }
53. function getCancelMapKey(url: string, method: string) {
54.   return `${url}_${method}`;
55. }

复制代码

全局加载loading
src/utils/fullLoading.ts

1. import ReactDOM from "react-dom/client";
2. import { Spin } from "antd";
4. // 当前请求的个数
5. let reqCount = 0;
7. // 显示 loading
8. function show() {
9.   if (reqCount === 0) {
10.     const dom = document.createElement("div");
11.     dom.id = "loading";
12.     dom.style.position = "fixed";
13.     dom.style.top = "0";
14.     dom.style.right = "0";
15.     dom.style.bottom = "0";
16.     dom.style.left = "0";
17.     dom.style.background = "rgba(0, 0, 0, 0.5)";
18.     dom.style.display = "flex";
19.     dom.style.justifyContent = "center";
20.     dom.style.alignItems = "center";
21.     dom.style.zIndex = "9999";
22.     document.body.appendChild(dom);
23.     ReactDOM.createRoot(dom).render(<Spin size="large"></Spin>);
24.   }
25.   reqCount++;
26. }
28. // 隐藏 loading
29. function hide() {
30.   reqCount--;
31.   if (reqCount === 0) {
32.     const dom = document.getElementById("loading");
33.     if (dom) {
34.       document.body.removeChild(dom as HTMLElement);
35.     }
36.   }
37. }
39. const fullLoading = {
40.   show,
41.   hide,
42. };
44. export default fullLoading;

复制代码

src/enums/httpEnum.ts

1. /**
2. * @description：响应结果枚举
3. */
4. export enum ResponseCodeEnum {
5.         SUCCESS = 200,
6.         ERROR = 500,
7.         NOLOGIN = 499,
8. }

复制代码

类型文件
src/api/type/api.type.ts

1. // 接口返回结构，不包含 data
2. export interface ResponseResult {
3.   // 状态码
4.   code: number;
5.   // 消息
6.   msg: string;
7. }
9. // 完整的接口返回结构
10. export interface ResultData<T = any> extends ResponseResult {
11.   // 数据
12.   data: T;
13. }

复制代码

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