axios源码解析 - 响应拦截器

该文章紧接着 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