由一个 bug 引发对 axios 的刨根问底

// 第一种：使用 CancelTokenconst { CancelToken, isCanCel } = axios;const source = CancelToken.source();
axios.get('/user/12345', {  cancelToken: source.token}).catch(thrown => {  if (isCancel(thrown)) {      // 获取 取消请求 的相关信息    console.log('Request canceled', thrown.message);  } else {    // 处理其他异常  }});
axios.post('/user/12345', {  name: 'new name'}, {  cancelToken: source.token})
// 取消请求。source.cancel('Operation canceled by the user.');
// 第二种：还可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token：const CancelToken = axios.CancelToken;let cancel;
axios.get('/user/12345', {  cancelToken: new CancelToken(function executor(c) {    // executor 函数接收一个 cancel 函数作为参数    cancel = c;  })});
// 取消请求cancel();

/*Axios.js核心代码*/Axios.prototype.request = function request(config) {  ...// 在这里调用了forEach方法，而这个方法在下边InterceptorManager.js中  this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {    // 将参数interceptor加到chain数组头部    chain.unshift(interceptor.fulfilled, interceptor.rejected);  });
  while (chain.length) {    promise = promise.then(chain.shift(), chain.shift());  }
  return promise;};
/*InterceptorManager.js文件核心代码*/function InterceptorManager() {  this.handlers = []; // 用来保存所有拦截器注册的函数}
// 这个use方法用来给拦截器注册回调函数InterceptorManager.prototype.use = function use(fulfilled, rejected) {  // 这里的handles中存的是由fulfilled和rejected组成的object  this.handlers.push({    fulfilled: fulfilled,    rejected: rejected  });  return this.handlers.length - 1;};
...
/*     将所有handles中注册的函数{    fulfilled: fulfilled,    rejected: rejected  }，  遍历给fn(这里的fn可以理解为unshiftRequestInterceptors)执行一遍，  即作为unshiftRequestInterceptors函数的参数*/InterceptorManager.prototype.forEach = function forEach(fn) {  utils.forEach(this.handlers, function forEachHandler(h) {    if (h !== null) {      fn(h);    }  });};
/*utils.js核心代码*/function forEach(obj, fn) {  ...  if (isArray(obj)) {// fn(理解为unshiftRequestInterceptors)遍历执行，参数是this.handles中的元素    for (var i = 0, l = obj.length; i < l; i++) {      fn.call(null, obj[i], i, obj);    }  }  ...}

/*dispatchRequest.js核心代码*/module.exports = function dispatchRequest(config) {  ...  // 这里的adapter其实就是获取发送请求的方式，浏览器中为xhr,node端为http  var adapter = config.adapter || defaults.adapter;
  /*     这里then参数中为promise的两个回调函数，那么adapter这个promise是什么样的,    请看下边的xhr.js源码分析  */  return adapter(config).then(function onAdapterResolution(response) {    throwIfCancellationRequested(config);
    // Transform response data    response.data = transformData(      response.data,      response.headers,      config.transformResponse    );
    return response;  }, function onAdapterRejection(reason) {    if (!isCancel(reason)) {      throwIfCancellationRequested(config);
      // Transform response data      if (reason && reason.response) {        reason.response.data = transformData(          reason.response.data,          reason.response.headers,          config.transformResponse        );      }    }
    return Promise.reject(reason);  });};

module.exports = function xhrAdapter(config) {  return new Promise(function dispatchXhrRequest(resolve, reject) {...    if (config.cancelToken) {      /*       如果config中有cancelToken参数，则讲onCanceled注册为             config.cancelToken.promise的resolve回调函数，在onCanceled方法中就可以取消请求，并将adapter.promise状态变为reject      */      config.cancelToken.promise.then(function onCanceled(cancel) {        if (!request) {          return;        }
        request.abort();        reject(cancel);        // Clean up request        request = null;      });    }...  });};

function CancelToken(executor) {...  var resolvePromise;  // 在这里将cancelToken.promise的resolve函数赋值给了resolvePromise变量  this.promise = new Promise(function promiseExecutor(resolve) {    resolvePromise = resolve;  });
  var token = this;  // 在执行executor这个方法时候会执行resolvePromise，即xhr.js中注册的onCancel，那什么时候会执行executor呢？请看接下里的source方法  executor(function cancel(message) {    if (token.reason) {      // Cancellation has already been requested      return;    }
    token.reason = new Cancel(message);    resolvePromise(token.reason);  });}.../*看看源码得知实际调用axios.cancelToken.source()方法生成取消令牌的时候实际上生成了包含两个属性(token，cancel)的对象，在执行cancel方法的时候就会执行上述方法executor，也就是说这里的cancel一执行就执行了onCancel方法，就会取消请求*/CancelToken.source = function source() {  var cancel;  var token = new CancelToken(function executor(c) {    cancel = c;  });  return {    token: token,    cancel: cancel  };};