axios 如何设计拦截器

// 请求拦截
axios.interceptors.request.use(
  // 处理器
  function onFulfilled (){...},
  // 错误捕获
  function onRejected (){...},
)


// 响应拦截器
axios.interceptors.response.use(
   // 处理器
  function onFulfilled (){...},
  // 错误捕获
  function onRejected (){...},
)

const c = axios.create({
  baseURL: '/proxy',
  timeout: 1000,
})


const CancelToken = axios.CancelToken;
const source = CancelToken.source();


function req1(conf: AxiosRequestConfig){
  console.log('r1')
  return conf
}


function req2(conf: AxiosRequestConfig){
  console.log('r2')
  throw new Error('from r2')
}


function req3(conf: AxiosRequestConfig){
  console.log('r3')
  return conf
}


function err1(){
  console.log('e1')
}


function err2(){
  console.log('e2')
}


function err3(){
  console.log('e3')
}


c.interceptors.request.use(req1, err1)
c.interceptors.request.use(req2, err2)
c.interceptors.request.use(req3, err3)


c.get('/', {cancelToken: source.token})
.then(() => console.log('req end'))
.catch((e) => console.log('err end', e))
// r3
// r2
// e1
// err end

'use strict';


var utils = require('./../utils');


function InterceptorManager() {
  // 执行函数缓存队列
  this.handlers = [];
}


/**
 * fulfilled, rejected 将交由Promise.then函数
 * 返回注册id，以便移除对映的拦截器
 */
InterceptorManager.prototype.use = function use(fulfilled, rejected, options) {
   // 向执行队列中添加拦截器配置对象
   this.handlers.push({
    // 执行器
    fulfilled: fulfilled,
    // 错误捕获
    rejected: rejected,
    // 同步执行标识符
    // 该标识符将影响拦截器的调用模式
    synchronous: options ? options.synchronous : false,
    // 筛选函数
    runWhen: options ? options.runWhen : null
  });
  // 返回的id为队列的长度
  return this.handlers.length - 1;
};


/**
 * 通过id移除拦截器
 */
InterceptorManager.prototype.eject = function eject(id) {
  if (this.handlers[id]) {
     // 应为拦截器的标识id，为队列的长度
     // 而 handlers.length 是动态的
     // 为了防止id重复,删除拦截器时，将对应的位置置空，而不是删除
     // 保证length的值一直处于递增的状态
    this.handlers[id] = null;
  }
};


/**
 * 遍历拦截器队列
 */
InterceptorManager.prototype.forEach = function forEach(fn) {
  utils.forEach(this.handlers, function forEachHandler(h) {
     // 跳过空值，既已删除位
    if (h !== null) {
      fn(h);
    }
  });
};


module.exports = InterceptorManager;

// Axios.js


  // 请求拦截收集队列 
  var requestInterceptorChain = [];
  // 是否存在同步配置 
  var synchronousRequestInterceptors = true;
  this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
     // 判断是否存在runWhen函数，通过runWhen执行返回，判断是否跳过当前拦截器
    if (typeof interceptor.runWhen === 'function' && interceptor.runWhen(config) === false) {
      return;
    }
    // 收集同步状态设置
    // 必须要求所有可执行拦截器，都配置 synchronous 时。 
    // synchronousRequestInterceptors 最终值才能为true，执行同步调用模式
    // 否则为false, 将执行异步调用模式
    synchronousRequestInterceptors = synchronousRequestInterceptors && interceptor.synchronous;
    // 收集拦截器
    // 这里添加模式为unshift
    // 所以最终队列顺序与注册顺序相反
     // 例如：注册顺序：[1, 2, 3] 收集器顺序:[3, 2, 1]
    requestInterceptorChain.unshift(interceptor.fulfilled, interceptor.rejected);
  });

  // 响应拦截收集队列 
 var responseInterceptorChain = [];
  this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
    // 与请求拦截不同，这里没有对 runWhen，synchronous 的判断
    // 所以两个配置只作用于请求拦截
    // 这里添加的模式 push
    // 所以最终的队列顺序与注册顺序一致
    // 例如：注册顺序：[1, 2, 3] 收集器顺序:[1, 2, 3]
    responseInterceptorChain.push(interceptor.fulfilled, interceptor.rejected);
  });

  var promise;
  // 拦截器的两种调用模式
  // 当所用拦截器都为配置，synchronous 属性时，使用异步队列(默认模式)
  if (!synchronousRequestInterceptors) {
    // chain为请求任务执行队列
    // dispatchRequest 请求发送器
    // 因为队列任务将通过Promise.then(task, error) 模式调用
    // 所以默认队列包含 一个 undefined 值，作为发送器的错误捕获器占位符
    // Promise.then(dispatchRequest, undefined)
    var chain = [dispatchRequest, undefined];
    // 将请求拦截追加到队列头部
    Array.prototype.unshift.apply(chain, requestInterceptorChain);
    // 将响应拦截追加到请求发送器之后
    chain = chain.concat(responseInterceptorChain);
    // 最终的任务队列顺序
    // 反序的请求拦截 -> 请求发送 -> 正序的响应拦截
    promise = Promise.resolve(config);
    // 执行任务队列
    while (chain.length) {
      // 每个任务都是由 执行器，错误捕获成对执行的
      // 所以初始队列包含一个undefined占位符
      promise = promise.then(chain.shift(), chain.shift());
    }
    // 返回promise
    return promise;
  }

 // 当 synchronousRequestInterceptors 为true时，启动同步模式
 var newConfig = config;
  // 直接遍历执行请求拦截队列
  while (requestInterceptorChain.length) {
    var onFulfilled = requestInterceptorChain.shift();
    var onRejected = requestInterceptorChain.shift();
    try {
      newConfig = onFulfilled(newConfig);
    } catch (error) {
      onRejected(error);
      break;
    }
  }
  
  // 发送请求
  try {
    promise = dispatchRequest(newConfig);
  } catch (error) {
    return Promise.reject(error);
  }
  
  // 执行响应队列
  // 响应队列的执行与异步模式一致，所以在收集任务时，没有做 synchronous 判断
  while (responseInterceptorChain.length) {
    promise = promise.then(responseInterceptorChain.shift(), responseInterceptorChain.shift());
  }
  return promise;

function req1(){
  console.log('r1')
}


function req2(){
  console.log('r2')
}


function req3(){
  console.log('r3')
  throw new Error('from r3')
}


function err1(){
  console.log('e1')
}


function err2(){
  console.log('e2')
}


function err3(){
  console.log('e3')
}
const p = Promise.resolve()
p
.then(req3, err3)
.then(req2, err2)
.then(req1, err1)
// r3 -> e2 -> r1

const task = [
  [req3, err3],
  [req2, err2],
  [req1, err1]
]


for(let[req, err] of task){
  try {
    req()
  } catch (error) {
    err()
    break
  }
}
// r3 -> e3

p
.then(req3)
.catch(err3)


.then(req2)
.catch(err2)


.then(req1)
.catch(err1)
// r3 -> e3 -> r2 -> r1