1.拦截器使用方法//请求拦截器1axios.interceptors.request.use(options=>{console.log('1')returnoptions})//请求拦截器2axios.interceptors.request.use(options=>{console.log('2')returnoptions})对应拦截器//对应拦截器1axios.interceptors.response.use(options=>{console.log('2')returnoptions})//响应拦截器2axios.interceptors.response.use(options=>{console.log('1')returnoptions})发送请求axios(options).then(function(res){}).catch(function(res){});执行效果注意:先添加请求拦截器再执行,先添加响应拦截器先执行.jsInterceptorManager.prototype.use=functionuse(fulfilled,rejected,options){this.handlers.push({fulfilled:完成,拒绝:拒绝,同步:选项?options.synchronous:false,runWhen:选项?options.runWhen:null});返回this.handlers.length-1;};接收拦截器执行成功回调,失败回调和配置参数,上面的例子只是增加了拦截器执行成功回调,相当于rejectedisundefined,返回this.handlers。长度-1返回当前拦截器的id,方便后续取消拦截器。顺便看看拦截器的取消。InterceptorManager.prototype.eject=functioneject(id){if(this.handlers[id]){this.handlers[id]=null;}};将id对应的拦截器设置为null。如果想取消拦截,可以调用axios.interceptors.request.eject(1),其中index为1,即第二个请求拦截器interceptor和axios(options).then(function(res){}).catch(函数(资源){});发送请求时,Axios.prototype.requestAxios.prototype.request=functionrequest(config){//过滤掉跳过的拦截器varrequestInterceptorChain=[];varsynchronousRequestInterceptors=true;this.interceptors.request.forEach(functionunshiftRequestInterceptors(interceptor){//options?options.synchronous:false,synchronousRequestInterceptors=synchronousRequestInterceptors&&interceptor.synchronous;//添加到数组开头(多个参数代表多个元素)//为什么interceptor.fulfilled而不是interceptor.handlers.fulfilled,requestInterceptorChain.unshift(interceptor.fulfilled,interceptor.rejected);});varresponseInterceptorChain=[];this.interceptors.response.forEach(functionpushResponseInterceptors(interceptor){responseInterceptorChain.push(interceptor.fulfilled,interceptor.rejected);});变种承诺;if(!synchronousRequestInterceptors){varchain=[dispatchRequest,undefined];//unshift()方法将一个或多个元素添加到数组的开头并返回新的长度。Array.prototype.unshift.apply(chain,requestInterceptorChain);chain.concat(responseInterceptorChain);/*将现有对象转换为Promise对象Promise.resolve('foo')//等同于newPromise(resolve=>resolve('foo'))*/promise=Promise.resolve(config);while(chain.length){//调用拦截器,请求链接promise=promise.then(chain.shift(),chain.shift());}返回承诺;}varnewConfig=配置;while(requestInterceptorChain.length){//删除第一个元素并返回第一个元素varonFulfilled=requestInterceptorChain.shift();varonRejected=requestInterceptorChain.shift();尝试{newConfig=onFulfilled(newConfig);}赶上(呃ror){onRejected(错误);休息;}}尝试{promise=dispatchRequest(newConfig);}catch(error){returnPromise.reject(error);}while(responseInterceptorChain.length){promise=promise.then(responseInterceptorChain.shift(),responseInterceptorChain.shift());}回报承诺;};以上源码只贴主要代码1.分别遍历请求拦截器和响应拦截器,在请求拦截器数组前面和响应拦截器后面依次添加拦截器成功回调和失败回调2.定义一个数组在实际发起请求时执行的函数varchain=[dispatchRequest,undefined];3、在前面添加请求拦截器,在后面添加返回拦截器,最终链形如下:function]遍历链,使用promise链依次执行:实现代码:while(chain.length){//调用拦截器,请求偶数promise=promise.then(chain.shift(),chain.shift());}测试执行流程letfun1=function(e){console.log('拦截器1成功函数','上一个函数返回的参数',e)return1}letfun2=function(e){console.log('实际请求','上一个函数返回的参数',e)return2}letfun3=function(e){console.log('响应拦截器1成功函数','上一个函数返回的参数',e)返回3}让arr=[乐趣1,undefined,fun2,undefined,fun3,undefined]letpromise=Promise.解决(9);while(arr.length){promise=promise.然后(arr.shift(),arr.shift());}promise.then(res=>{console.log('最后获取的数据',res)})执行结果关于axios更详细的分析:若川先生的源码分析系列
