ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【axios】拦截器：axios.interceptors.request.use|axios.interceptors.res [打印本页]
作者: 千千梦丶琪    时间: 2024-7-18 13:52
标题: 【axios】拦截器：axios.interceptors.request.use|axios.interceptors.res
概述

axios有请求拦截器（request）、相应拦截器（response）、axios自定义回调处理（这里就是我们常用的地方，会将成功和失败的回调函数写在这里）
执行顺序: 请求拦截器 -> api请求 -> 相应拦截器->自定义回调。 axios实现这个拦截器机制如下：

假设我们定义了 请求拦截器1号（r1）、请求拦截器2号(r2)、相应拦截器1号(s1)、相应拦截器2号(s2)、自定义回调处理函数(my)
那么执行效果是：r2 r1 s1 s2 my
设置拦截器

在 Axios 中设置拦截器很简朴，通过 axios.interceptors.request 和 axios.interceptors.response 对象提供的 use 方法，就可以分别设置请求拦截器和相应拦截器：
  1. axios.interceptors.request.use(function (config) {
  2.   config.headers.token = 'added by interceptor';
  3.   return config;
  4. });
  6. // 添加响应拦截器 —— 处理响应对象
  7. axios.interceptors.response.use(function (data) {
  8.   data.data = data.data + ' - modified by interceptor';
  9.   return data;
  10. });
  12. axios({
  13.   url: '/hello',
  14.   method: 'get',
  15. }).then(res =>{
  16.   console.log('axios res.data: ', res.data)
  17. })
复制代码
Axios 拦截器的实现

任务注册

要搞清晰任务是如何注册的，就需要了解 axios 和 axios.interceptors 对象。
  1. /**
  2. * Create an instance of Axios
  3. *
  4. * @param {Object} defaultConfig The default config for the instance
  5. * @return {Axios} A new instance of Axios
  6. */
  7. function createInstance(defaultConfig) {
  8.   var context = new Axios(defaultConfig);
  9.   var instance = bind(Axios.prototype.request, context);
  11.   // Copy axios.prototype to instance
  12.   utils.extend(instance, Axios.prototype, context);
  14.   // Copy context to instance
  15.   utils.extend(instance, context);
  17.   return instance;
  18. }
  20. // Create the default instance to be exported
  21. var axios = createInstance(defaults);
  23. // Expose Axios class to allow class inheritance
  24. axios.Axios = Axios;
复制代码
bind函数：
  1. module.exports = function bind(fn, thisArg) {
  2.   return function wrap() {
  3.     var args = new Array(arguments.length);
  4.     for (var i = 0; i < args.length; i++) {
  5.       args[i] = arguments[i];
  6.     }
  7.     return fn.apply(thisArg, args);
  8.   };
  9. };
复制代码
在 Axios 的源码中，我们找到了 axios 对象的定义，很明显默认的 axios 实例是通过 createInstance 方法创建的，该方法最终返回的是Axios.prototype.request 函数对象。同时，我们发现了 Axios的构造函数：
  1. /**
  2. * Create a new instance of Axios
  3. *
  4. * @param {Object} instanceConfig The default config for the instance
  5. */
  6. function Axios(instanceConfig) {
  7.   this.defaults = instanceConfig;
  8.   this.interceptors = {
  9.     request: new InterceptorManager(),
  10.     response: new InterceptorManager()
  11.   };
  12. }
复制代码
在构造函数中，我们找到了 axios.interceptors 对象的定义，也知道了 interceptors.request 和 interceptors.response 对象都是 InterceptorManager 类的实例。因此接下来，进一步分析InterceptorManager 构造函数及相关的 use 方法就可以知道任务是如何注册的：
  1. function InterceptorManager() {
  2.   this.handlers = [];
  3. }
  5. /**
  6. * Add a new interceptor to the stack
  7. *
  8. * @param {Function} fulfilled The function to handle `then` for a `Promise`
  9. * @param {Function} rejected The function to handle `reject` for a `Promise`
  10. *
  11. * @return {Number} An ID used to remove interceptor later
  12. */
  13. InterceptorManager.prototype.use = function use(fulfilled, rejected) {
  14.   this.handlers.push({
  15.     fulfilled: fulfilled,
  16.     rejected: rejected
  17.   });
  18.   return this.handlers.length - 1;
  19. };
复制代码
通过观察 use 方法，我们可知注册的拦截器都会被保存到 InterceptorManager 对象的 handlers 属性中。下面我们用一张图来总结一下 Axios 对象与 InterceptorManager 对象的内部结构与关系：

任务编排

现在我们已经知道如何注册拦截器任务，但仅仅注册任务是不敷，我们还需要对已注册的任务进行编排，如许才能确保任务的执行顺序。这里我们把完成一次完备的 HTTP 请求分为处理请求配置对象、发起 HTTP 请求和处理相应对象 3 个阶段。
接下来我们来看一下 Axios 如何发请求的：
  1. axios({
  2.   url: '/hello',
  3.   method: 'get',
  4. }).then(res =>{
  5.   console.log('axios res: ', res)
  6.   console.log('axios res.data: ', res.data)
  7. })
复制代码
通过前面的分析，我们已经知道 axios 对象对应的是 Axios.prototype.request 函数对象，该函数的详细实现如下：
  1. Axios.prototype.request = function request(config) {
  2.   /*eslint no-param-reassign:0*/
  3.   // Allow for axios('example/url'[, config]) a la fetch API
  4.   if (typeof config === 'string') {
  5.     config = arguments[1] || {};
  6.     config.url = arguments[0];
  7.   } else {
  8.     config = config || {};
  9.   }
  11.   config = mergeConfig(this.defaults, config);
  13.   // Set config.method
  14.   if (config.method) {
  15.     config.method = config.method.toLowerCase();
  16.   } else if (this.defaults.method) {
  17.     config.method = this.defaults.method.toLowerCase();
  18.   } else {
  19.     config.method = 'get';
  20.   }
  22.   // Hook up interceptors middleware
  23.   var chain = [dispatchRequest, undefined];
  24.   var promise = Promise.resolve(config);
  26.   this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
  27.   //成对压入chain数组中，这里的成对是一个关键点，从代码处可以看出请求拦截器向chain中压入的时候使用的是unshift方法，也就是每次添加函数方法队都是从数组最前面添加，这也是为什么请求拦截器输出的时候是r2 r1。
  28.     chain.unshift(interceptor.fulfilled, interceptor.rejected);
  29.   });
  31.   this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
  32.   //与unshift不同的是，push函数一直被push到最尾部，那么形成的就是s1 s2的顺序，这也就解释响应拦截器函数是顺序执行的了。
  33.     chain.push(interceptor.fulfilled, interceptor.rejected);
  34.   });
  36.   while (chain.length) {
  37.     promise = promise.then(chain.shift(), chain.shift());
  38.   }
  40.   return promise;
  41. };
复制代码
任务编排的代码比较简朴，我们来看一下任务编排前和任务编排后的对比图：

任务调理

任务编排完成后，要发起 HTTP 请求，我们还需要按编排后的顺序执行任务调理。在 Axios 中详细的调理方式很简朴，详细如下所示：
  1.   while (chain.length) {
  2.     promise = promise.then(chain.shift(), chain.shift());
  3.   }
  5.   return promise;
复制代码
因为 chain 是数组，以是通过 while 语句我们就可以不断地取出设置的任务，然后组装成 Promise 调用链从而实现任务调理，对应的处理流程如下图所示：

泉源

浅谈axios.interceptors拦截器
axios 拦截器分析
axios部分工作原理及常见紧张问题的探析：

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



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4