该文章紧接着 axios源码解析 - 请求拦截器,简单的补充下。
业务代码如下:
var service = axios.create(); // 响应拦截器 service.interceptors.response.use((response) => { if (response.data.code === 200) { return response.data; } else { return Promise.reject(response.data); } }, (err) => { return Promise.reject(err); });
核心代码如下:
// 请求拦截数组 var requestInterceptorChain = []; this.interceptors.request.forEach(function(interceptor) { requestInterceptorChain.unshift(interceptor.fulfilled, interceptor.rejected); }); // 响应拦截数组 var responseInterceptorChain = []; this.interceptors.response.forEach(function(interceptor) { responseInterceptorChain.push(interceptor.fulfilled, interceptor.rejected); }); var promise; var chain = [dispatchRequest, undefined]; Array.prototype.unshift.apply(chain, requestInterceptorChain); chain = chain.concat(responseInterceptorChain); promise = Promise.resolve(config); while (chain.length) { promise = promise.then(chain.shift(), chain.shift()); } return promise;
多个响应拦截器
主要讲多个响应拦截器的执行顺序,代码如下:
// 第一个响应拦截器 service.interceptors.response.use(fulfilled1, rejected1); // 第二个响应拦截器 service.interceptors.response.use(fulfilled2, rejected2); // 第三个响应拦截器 service.interceptors.response.use(fulfilled3, rejected3); // 根据上述Axios.prototype.request方法,可以知道handlers数组:[fulfilled1, rejected1, fulfilled2, rejected2, fulfilled3, rejected3] // 所以执行顺序:fulfilled1 --> fulfilled2 --> fulfilled3