Axios源码解读 #

//Axios.js
function Axios(instanceConfig) {
  this.defaults = instanceConfig;
  this.interceptors = {
    request: new InterceptorManager(),
    response: new InterceptorManager()
  };
}
/**
 * 发送一个请求
 *
 * @param {Object} config The config specific for this request (merged with this.defaults)
 */
Axios.prototype.request = function request(config) {
  // Allow for axios('example/url'[, config]) a la fetch API
  if (typeof config === 'string') {
    config = arguments[1] || {};
    config.url = arguments[0];
  } else {
    config = config || {};
  }
  //合并配置
  config = mergeConfig(this.defaults, config);

  // 设置config.method
  if (config.method) {
    config.method = config.method.toLowerCase();
  } else if (this.defaults.method) {
    config.method = this.defaults.method.toLowerCase();
  } else {
    config.method = 'get';
  }

  var transitional = config.transitional;

  if (transitional !== undefined) {
    validator.assertOptions(transitional, {
      silentJSONParsing: validators.transitional(validators.boolean),
      forcedJSONParsing: validators.transitional(validators.boolean),
      clarifyTimeoutError: validators.transitional(validators.boolean)
    }, false);
  }
   //关键的链式调用，在文章后面具体解析....
};

 // Provide aliases for supported request methods
 // 针对不需要提交正文数据的请求封装处理
 utils.forEach(['delete', 'get', 'head', 'options'], function forEachMethodNoData(method) {
   /*eslint func-names:0*/
   Axios.prototype[method] = function(url, config) {
     return this.request(mergeConfig(config || {}, {
       method: method,
       url: url,
       data: (config || {}).data
     }));
   };
 });
 // 针对可以提交正文数据的请求处理
 utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {
   /*eslint func-names:0*/
   Axios.prototype[method] = function(url, data, config) {
     return this.request(mergeConfig(config || {}, {
       method: method,
       url: url,
       data: data
     }));
   };
 }); 

 axios({
   url: '/user'
 });
 axios.get('/user', {
   params: {
     page:1,
     limit:2
   }
 })
 ...

 let newRequest = axios.create({
   baseURL: 'http://localhost:9999'
 });

 // 默认配置 可以通过 axios.defaults 来获取
 axios.defaults.baseURL = 'http://localhost:8888';
 axios.get('/user');

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

// Axios.js  
function Axios(instanceConfig) {
   this.defaults = instanceConfig;
   // 这里创建的请求和响应拦截器 通过统一的类构造出来的
   this.interceptors = {
     request: new InterceptorManager(),
     response: new InterceptorManager()
   };
 }

// core/InterceptorManager.js
function InterceptorManager() {
  this.handlers = [];
}
// 添加拦截器 添加成功、失败回调
InterceptorManager.prototype.use = function use(fulfilled, rejected, options) {
  this.handlers.push({
    fulfilled: fulfilled,
    rejected: rejected,
    // 默认情况下它们被假定为异步的 如果您的请求拦截器是同步的，可以通过这个参数默认配置，它将告诉 axios 同步运行代码并避免请求执行中的任何延迟。
    synchronous: options ? options.synchronous : false,
    // 如果要基于运行时检查执行特定拦截器，可以通过这个runWhen这个参数，类型为函数 
    runWhen: options ? options.runWhen : null
  });
  return this.handlers.length - 1;
};

// 注销指定拦截器
InterceptorManager.prototype.eject = function eject(id) {
  if (this.handlers[id]) {
    this.handlers[id] = null;
  }
};

// 遍历执行
InterceptorManager.prototype.forEach = function forEach(fn) {
  utils.forEach(this.handlers, function forEachHandler(h) {
    // 确定没被eject注销 才执行
    if (h !== null) {
      fn(h);
    }
  });
};

module.exports = InterceptorManager;

// Axios.js 

 Axios.prototype.request = function request(config) {
   // 关键的链式调用
   // 链式调用存储数组 -- 请求数组
   var requestInterceptorChain = [];
   // 默认所有请求拦截器都为同步
   var synchronousRequestInterceptors = true;
   //遍历注册好的拦截器数组
   this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
     // 这里interceptor是注册的每一个拦截器对象 
     // axios请求拦截器向外暴露了runWhen配置来针对一些需要运行时检测来执行的拦截器
     // 例如：实现一个只有get方法才生效的拦截器
     // 
     // function onGetCall(config) {
 		 //	   return config.method === 'get';
     // }
     // axios.interceptors.request.use(function (config) {
     //   config.headers.test = 'special get headers';
     //   return config;
     // }, null, { runWhen: onGetCall });
     // 
     // 如果配置了该函数，并且返回结果为true，则记录到拦截器链中
     // 反之则直接结束该层循环
     if (typeof interceptor.runWhen === 'function' && interceptor.runWhen(config) === false) {
       return;
     }
 
      // interceptor.synchronous 是对外提供的配置，可标识该拦截器是异步还是同步 默认为false(异步) 
    // 这里是来同步整个执行链的执行方式的，如果有一个请求拦截器为异步 那么下面的promise执行链则会有不同的执行方式
     synchronousRequestInterceptors = synchronousRequestInterceptors && interceptor.synchronous;

     //将interceptor.fulfilled, interceptor.rejected加入chain开头
     requestInterceptorChain.unshift(interceptor.fulfilled, interceptor.rejected);
   });
 
   //链式调用存储数组 -- 响应数组
   var responseInterceptorChain = [];
   this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
     //将interceptor.fulfilled, interceptor.rejected加入chain末尾
     responseInterceptorChain.push(interceptor.fulfilled, interceptor.rejected);
   });
 
   var promise;
 
   // 如果为异步 其实也是默认情况
   if (!synchronousRequestInterceptors) {
     //dispatchRequest方法在适配器部分讲解
     var chain = [dispatchRequest, undefined];
     // 请求拦截器塞到前面
     Array.prototype.unshift.apply(chain, requestInterceptorChain);
     // 响应拦截器塞到后面
     chain.concat(responseInterceptorChain);
 			//chain = [fulfilled[1],rejected[1],fulfilled[0],rejected[0],dispatchRequest, undefined,fulfilled[3],rejected[3],fulfilled[4],rejected[4]]
     promise = Promise.resolve(config);
     while (chain.length) {
			// (fulfilled,rejected) 每次一组两个
      // shift：从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。
       // 每次promise都会被重新赋值
       promise = promise.then(chain.shift(), chain.shift());
     }
     
     return promise;
   }
 
   // 这里则是同步的逻辑 
   var newConfig = config;
   // 请求拦截器一个一个的走
   while (requestInterceptorChain.length) {
     var onFulfilled = requestInterceptorChain.shift();
     var onRejected = requestInterceptorChain.shift();
     try {
       //每次拿到最新的config
       newConfig = onFulfilled(newConfig);
     } catch (error) {
       onRejected(error);
       break;
     }
   }
 	 // 到这里 微任务不会过早的创建
   // 也就解决了 微任务过早创建、当前宏任务过长或某个请求拦截器中有异步任务而阻塞真正的请求延时发起问题
   try {
     promise = dispatchRequest(newConfig);
   } catch (error) {
     return Promise.reject(error);
   }
   // 响应拦截器执行
   while (responseInterceptorChain.length) {
     promise = promise.then(responseInterceptorChain.shift(), responseInterceptorChain.shift());
   }
 
   return promise;
 }

// 暴露出token 和 cancel取消方法
CancelToken.source = function source() {
  var cancel;
  // 构造CancelToken 的实例,实例上有两个属性一个promise一个reason
  // 同时把注册的回调函数的参数也是个函数把这个函数的执行权抛使用者调用(cancel)
  var token = new CancelToken(function executor(c) {
    cancel = c;
  });
  return {
    token: token,
    cancel: cancel
  };
};

// CancelToken原型上有个么一个方法 很简单就是直接抛错 将reason抛出
// reason则是根据调用cancel函数的参数 new Cancel的实例
CancelToken.prototype.throwIfRequested = function throwIfRequested() {
  if (this.reason) {
    throw this.reason;
  }
};

// 判断如果配置了取消请求的token则就抛出
function throwIfCancellationRequested(config) {
  if (config.cancelToken) {
    // 调用抛出错误的方法
    config.cancelToken.throwIfRequested();
  }
}

module.exports = function dispatchRequest(config) {
  // 请求前
  throwIfCancellationRequested(config);
  // ... 省略代码
  // 请求中的在上面adapter中
  return adapter(config).then(function onAdapterResolution(response) {
    // 请求完成后
    throwIfCancellationRequested(config);
    // ... 省略代码
  }, function onAdapterRejection(reason) {
    // 请求完成后
    if (!isCancel(reason)) {
      throwIfCancellationRequested(config);
      // ... 省略代码
    }
    return Promise.reject(reason);
  });
};