anxios封装拦截器的两种方式

1. 函数方式

1. import axios, { AxiosInstance, AxiosRequestConfig } from "axios";
2. import { Message } from "view-ui-plus";
4. export const createAxiosByinterceptors = (
5.         config?: AxiosRequestConfig
6. ): AxiosInstance => {
7.         const instance = axios.create({
8.                 timeout: 1000, //超时配置
9.                 withCredentials: true, //跨域携带cookie
10.                 ...config, // 自定义配置覆盖基本配置
11.         });
13.         // 添加请求拦截器
14.         instance.interceptors.request.use(
15.                 (config: any) => {
16.                         // 在发送请求之前做些什么
17.                         console.log("config:", config);
18.                         return config;
19.                 },
20.                 (error) => {
21.                         // 对请求错误做些什么
22.                         return Promise.reject(error);
23.                 }
24.         );
26.         // 添加响应拦截器
27.         instance.interceptors.response.use(
28.                 (response) => {
29.                         // 对响应数据做点什么
30.                         console.log("response:", response);
31.                         const { code, data, message } = response.data;
32.                         if (code === 200) return data;
33.                         else if (code === 401) {
34.                                 // 退出处理
35.                         } else {
36.                                 Message.error(message);
37.                                 return Promise.reject(response.data);
38.                         }
39.                 },
40.                 (error) => {
41.                         // 对响应错误做点什么
42.                         console.log("error-response:", error.response);
43.                         console.log("error-config:", error.config);
44.                         console.log("error-request:", error.request);
45.                         if (error.response) {
46.                                 if (error.response.status === 401) {
47.                                         // 退出处理
48.                                 }
49.                         }
50.                         Message.error(error?.response?.data?.message || "服务端异常");
51.                         return Promise.reject(error);
52.                 }
53.         );
54.         return instance;
55. };

复制代码

使用方法

1. import { createAxiosByinterceptors } from "@/service/service";
3. const request = createAxiosByinterceptors({
4.         baseURL: "/sdkjfdk",
5. });
7. //lodaing配置
8. export const appList = (params: any): Promise<any> =>
9.         request.get("/app", { params, loading: true }); // 不需要默认的全局loading效果可配置loading为false关闭 loading默认为true
11. // 文件下载
12. export const exportGoods = (data: any) =>
13.         request.post("/export", data, {
14.                 responseType: "blob",
15.         });
17. export const expordtGoods = (data: any) =>
18.         request.put("/export", data, {
19.                 responseType: "blob",
20.         });

复制代码

解说：函数式通过调用方法创建axios实例，通过参数传入底子url，超时时间等定义参数。
使用时比力靠近axios写法。
2. 类方法

1. import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
2. import { Message } from 'view-design';
3. const $Message: any = Message;
4. export class HttpService {
5.   private instance: AxiosInstance;
6.   baseConfig: AxiosRequestConfig = { baseURL: "/commonApi" };
7.   constructor(baseURL?: string, timeout?: number) {
8.     // 使用axios.create创建axios实例
9.     this.instance = axios.create({ ...this.baseConfig, baseURL, timeout });
10.     // 请求拦截器
11.     this.instance.interceptors.request.use((config: AxiosRequestConfig) => {
12.       return config;
13.     }, (error: any) => {
14.       return Promise.reject(error);
15.     })
16.     // 响应拦截器
17.     this.instance.interceptors.response.use((response: AxiosResponse) => {
18.       if (response.request.responseType === 'blob') { // 流文件
19.         return response
20.       }
21.       const { retcode, code, status, message, msg, desc } = response.data;
22.       let msgStr = message || msg || desc || '系统异常，请联系管理员';
23.       if ((retcode && retcode === 200) || (code && code === 0)) {
24.         return Promise.resolve(response.data);
25.       } else if (!status) {
26.         return Promise.resolve(response.data);
27.       } else {
28.         $Message.error(msgStr);
29.         return Promise.reject(response.data);
30.       }
31.     }, (error: any) => {
32.       const { status, data } = error.response
33.       const { msg, message, desc } = data
34.       const errMsg = msg || message || desc || '系统异常，请联系管理员';
35.       switch (status) {
36.         case 401:
37.         // 这里可以做清空storage并跳转到登录页的操作
38.         case 400:
39.         case 403:
40.         case 404:
41.         case 408:
42.         case 500:
43.         case 501:
44.         case 502:
45.         case 503:
46.         case 504:
47.         case 505:
48.         default:
49.           $Message.error(errMsg);
50.       }
51.       return Promise.reject(error);
52.     })
53.   }
55.   /**
56.    * commonRequest
57.    */
58.   public commonRequest(config: AxiosRequestConfig): Promise<AxiosResponse> {
59.     return this.instance(config)
60.   }
61. }

复制代码

使用方法

1. import { HttpService } from '../interceptors'
3. const proxyPrefix: string = '/proxyApi';
4. const $docQaReq: any = new HttpService(proxyPrefix)
6. export const apiUrl = {
7.   docFileUpload: `${proxyPrefix}/doc/semantic-doc/document/file/upload`,
8. }
10. /**
11. * @description 获取所有文档库标签（以及文档
12. * @param type 1 为文档标签，不传则为文档库标签
13. */
14. export const getAllLibLabel = (data?: {
15.   type: number;
16. }) => {
17.   return $docQaReq.commonRequest({
18.     url: `/doc/semantic-doc/label/list`,
19.     method: 'get',
20.     params: data? data: null
21.   })
22. }
24. /**
25. * @description 新增文档库标签（以及文档
26. * @param type 1 为文档标签，不传则为文档库标签
27. */
28. export const creatLibLabel = (data: {
29.   name: string;
30.   type?: number;
31. }) => {
32.   return $docQaReq.commonRequest({
33.     url: '/doc/semantic-doc/label/create',
34.     method: 'post',
35.     data
36.   })
37. }

复制代码

类方法： 通过创建一个类，传入baseUrl，超时时间等自定义参数。使用时间调用类的方法实现创建axios实例。
两种方法写法不同，功能相同。

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