【axios】的浅度分析

一、Axios的拦截器醒目些什么？

Axios拦截器的实现原理主要涉及两个方面：请求拦截器和相应拦截器，它们分别在请求发送前和相应返回后举行预处理和后处理。
Axios内部维护了两个数组，一个用于存储请求拦截器，另一个用于存储相应拦截器。每个拦截器都是一个函数，这些函数按照它们在数组中定义的顺序被依次实行。
1、请求拦截器：
   当Axios发起一个请求时，会首先遍历并实行请求拦截器数组中的每个函数。
请求拦截器的作用是在请求发送前对请求举行修改或添加一些公共的逻辑，比方给每个请求体都加上token，或者修改请求的配置，如headers、url、params等。此外，也可以在此阶段取消请求。
请求拦截器的修改或添加的配置将被用于之后的请求发送。
  2、相应拦截器：
   一旦请求被发送并得到相应，Axios会遍历并实行相应拦截器数组中的每个函数。
相应拦截器的作用是在相应返回后对相应举行特定的处理，比方对返回的数据举行同一处理或对特定的错误举行处理。
如果相应是一个正常的相应，可以直接返回数据或对数据举行修改。如果相应是一个错误（比方，404或500状态码），可以举行错误处理或重试逻辑。
  利用Axios拦截器的利益包罗同一处理公共逻辑，减少重复代码，提高代码的可读性和可维护性。同时，也可以在请求或相应不符合预期时举行同一处理，提高步伐的健壮性。
必要留意的是，在利用Axios拦截器时，应确保请求拦截器在相应拦截器之前实行，避免逻辑上的错误。此外，应避免在拦截器中修改原始请求或相应数据，以免影响其他拦截器或请求处理器的处理结果。同时，应思量性能问题，避免在拦截器中举行耗时的操作。
综上所述，Axios拦截器的实现原理主要基于其内部维护的请求和相应拦截器数组，通过依次实行这些拦截器函数，实现对请求和相应的预处理和后处理。
二、Axios 源码中，拦截器是怎么实现的？（最简化的理解）

Axios 的拦截器实现基于 Axios 的核心原理，即 Axios 实例是一个包含请求和相应拦截器堆栈的对象。当发出请求或接收相应时，Axios 会遍历这些拦截器，并按照添加的顺序实行请求拦截器，以及按照相反的顺序实行相应拦截器。
在 Axios 的源码中，拦截器是通过一个 AxiosInterceptorManager 实例来管理的，它维护了一个拦截器数组。每个拦截器都是一个包含 fulfilled 和 rejected 函数的对象。这两个函数分别对应于拦截器成功处理和拦截器处理出错的情况。
以下是 Axios 拦截器管理器的一个简化版本，展示了其核心实现思绪：

1. class InterceptorManager {
2.   constructor() {
3.     this.handlers = []; // 存储拦截器的数组
4.   }
6.   use(fulfilled, rejected) {
7.     this.handlers.push({
8.       fulfilled: fulfilled,
9.       rejected: rejected
10.     });
11.     return this.handlers.length - 1; // 返回拦截器的ID
12.   }
14.   eject(id) {
15.     if (this.handlers[id]) {
16.       this.handlers[id] = null; // 移除拦截器
17.     }
18.   }
20.   forEach(fn) {
21.     this.handlers.forEach((h) => {
22.       if (h !== null) {
23.         fn(h);
24.       }
25.     });
26.   }
27. }

复制代码

在发送请求或接收相应时，Axios 会创建一个 promise 链，并通过 forEach 方法将拦截器中的 fulfilled 和 rejected 函数添加到这个链中。这样，每个拦截器都可以对请求或相应举行处理，然后将结果通报到链的下一个拦截器，或者在出错时竣事链的实行。
PS：留意，上面说的是拦截管理器，并非下面要说的拦截器

1. axios.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
2.   chain.unshift(interceptor.fulfilled, interceptor.rejected);
3. });
5. axios.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
6.   chain.push(interceptor.fulfilled, interceptor.rejected);
7. });

复制代码

在 Axios 的完整实现中，这个拦截器机制被集成到了 Axios 的请求发送和相应处理流程中。通过这种方式，Axios 可以在发送请求之前和接收相应之后，但在用户定义的 .then 或 .catch 实行之前，插入自定义的逻辑。
请留意，这里提供的代码只是为了说明 Axios 拦截器的实现原理，并不是 Axios 源码的完整复制。
三、高度简化的源码（axios拦截器实现源码）

Axios 拦截器的实现源码涉及到其核心模块的设计。Axios 允许你注册请求拦截器和相应拦截器，这些拦截器在请求发送前和相应返回后举行相应的处理。以下是简化的 Axios 拦截器实现源码的概述：

1. // 假设 Axios 实例有一个 interceptors 对象，其中包含了 request 和 response 两个数组
2. const instance = {
3.   interceptors: {
4.     request: [],
5.     response: []
6.   }
7. };
9. // 请求拦截器的函数定义
10. function onFulfilled(fulfilled, rejected) {
11.   return function (config) {
12.     return new Promise((resolve, reject) => {
13.       try {
14.         const result = fulfilled(config);
15.         if (result && typeof result.then === 'function') {
16.           result.then(resolvedConfig => {
17.             resolve(resolvedConfig);
18.           }, rejected);
19.         } else {
20.           resolve(result);
21.         }
22.       } catch (error) {
23.         reject(error);
24.       }
25.     };
26.   };
27. }
29. // 响应拦截器的函数定义
30. function onFulfilledResponse(fulfilled, rejected) {
31.   return function (response) {
32.     return new Promise((resolve, reject) => {
33.       try {
34.         const result = fulfilled(response);
35.         if (result && typeof result.then === 'function') {
36.           result.then(resolvedResponse => {
37.             resolve(resolvedResponse);
38.           }, rejected);
39.         } else {
40.           resolve(result);
41.         }
42.       } catch (error) {
43.         reject(error);
44.       }
45.     };
46.   };
47. }
49. // 添加请求拦截器
50. instance.interceptors.request.use = function (fulfilled, rejected) {
51.   this.interceptors.request.push({
52.     fulfilled: onFulfilled(fulfilled, rejected),
53.     rejected: rejected
54.   });
55.   return this;
56. };
58. // 添加响应拦截器
59. instance.interceptors.response.use = function (fulfilled, rejected) {
60.   this.interceptors.response.push({
61.     fulfilled: onFulfilledResponse(fulfilled, rejected),
62.     rejected: rejected
63.   });
64.   return this;
65. };
67. // 简化版的请求发送函数，用于展示拦截器如何处理
68. function dispatchRequest(config) {
69.   return new Promise((resolve, reject) => {
70.     // 遍历并执行请求拦截器
71.     const chain = [Promise.resolve(config)];
72.     instance.interceptors.request.forEach(interceptor => {
73.       chain.unshift(interceptor.fulfilled, interceptor.rejected);
74.     });
75.     // 遍历并执行响应拦截器
76.     chain.push(dispatchRequestToServer); // 假设这个函数是实际发送请求到服务器的函数
77.     while (chain.length) {
78.       const currentInterceptor = chain.shift();
79.       const nextInterceptor = chain.shift();
80.       if (typeof currentInterceptor === 'function') {
81.         currentInterceptor(config).then(chain => {
82.           if (typeof nextInterceptor === 'function') {
83.             nextInterceptor(chain);
84.           } else {
85.             resolve(chain);
86.           }
87.         }).catch(reject);
88.       }
89.     }
90.   });
91. }
93. // 假设函数，用于实际发送请求到服务器
94. function dispatchRequestToServer(config) {
95.   // 这里应该是实际的请求发送逻辑，为了简化，我们直接返回一个模拟的响应
96.   return Promise.resolve({
97.     data: 'Response data'
98.   });
99. }
101. // 使用拦截器
102. instance.interceptors.request.use(
103.   config => {
104.     // 在发送请求之前做些什么
105.     console.log('Request interceptor called', config);
106.     // 可以在这里修改config对象
107.     return config;
108.   },
109.   error => {
110.     // 对请求错误做些什么
111.     return Promise.reject(error);
112.   }
113. );
115. instance.interceptors.response.use(
116.   response => {
117.     // 对响应数据做点什么
118.     console.log('Response interceptor called', response);
119.     // 可以在这里修改响应数据
120.     return response;
121.   },
122.   error => {
123.     // 对响应错误做点什么
124.     return Promise.reject(error);
125.   }
126. );
128. // 发送请求
129. dispatchRequest({ url: 'https://api.example.com/data' })
130.   .then(response => {
131.     console.log('Response received:', response);
132.   })
133.   .catch(error => {
134.     console.error('Error occurred:', error);
135.   });

复制代码

以上代码是一个高度简化的版本，用于展示 Axios 拦截器是怎样实现的。如果你对 Axios 的拦截器实现细节感兴趣，建议查看 Axios 的官方 GitHub 仓库中的源码。

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