【axios三部曲】二、核心源码解析

目录结构

我们主要看lib里面的源码：

• adapter 适配器，用于处理浏览器或者node环境的适配
• cancel 取消请求
• core 核心源码
• helpers 一些工具帮助函数
• axios.js 入口文件
• defaults.js 默认配置文件
• utils.js 工具函数

axios.js入口文件

我们从入口文件开始

'use strict';
// axios 入口文件
var utils = require('./utils');	// 工具函数
var bind = require('./helpers/bind'); // 绑定函数
var Axios = require('./core/Axios');	// 核心Axios
var mergeConfig = require('./core/mergeConfig');	// 合并对象函数
var defaults = require('./defaults');	// 默认配置

/**
 * 用于创建一个Axios的实例对象，Axios实际上是一个构造函数
 * Create an instance of Axios
 * @param {Object} defaultConfig The default config for the instance
 * @return {Axios} A new instance of Axios
 */
function createInstance(defaultConfig) {
  	// 创建一个Axios的实例对象，但是我们需要的并不是它，我们要的是它原型上的request方法
  	// 这里把这个context当作上下文过渡
  	// 如果不清楚Axios具体是什么，可以先看文章后面的解析
    var context = new Axios(defaultConfig);
  	
  	// 重点：绑定Axios原型上的request方法，并指定this指向
  	// axios(),实际上是一个函数，就是Axios.prototype.request
    var instance = bind(Axios.prototype.request, context);
  
  	// axios光是一个函数还不够，还需要这样使用：axios.get(url[,config]);
  	// 于是我们就在这个函数身上添加Axios原型上有的prototype方法进来
  	// get,delete,head,options,post,put,patch...
    utils.extend(instance, Axios.prototype, context);
  
  	// 还少了一些Axios原有的属性，也添加进来（defaults,interceptors)
    utils.extend(instance, context);
  
    return instance;
}

var axios = createInstance(defaults);

axios.Axios = Axios;

axios.create = function create(instanceConfig) {
    return createInstance(mergeConfig(axios.defaults, instanceConfig));
};

// Expose Cancel & CancelToken
axios.Cancel = require('./cancel/Cancel');
axios.CancelToken = require('./cancel/CancelToken');
axios.isCancel = require('./cancel/isCancel');

// Expose all/spread
axios.all = function all(promises) {
    return Promise.all(promises);
};
axios.spread = require('./helpers/spread');

module.exports = axios;

// Allow use of default import syntax in TypeScript
module.exports.default = axios;

这里有一些工具函数，对于它的作用还不是很清楚，我们就来仔细看一下：

• bind
• utils.extend
• ...

axios常用的工具函数

这些工具函数可以结合源码上下文来看，效果更好

bind(fn, thisArg)

// 绑定函数的this指向
function bind(fn, thisArg){
	return function wrap(){
    // 把多个参数传入数组
  	let args = new Array(arguments.length);
    for(let i=0;i<args.length;i++){
    	args[i] = arguments[i];
    }
    
    return fn.apply(thisArg, args);
  }
}

forEach(obj, fn)

// 遍历一个Array或者一个Object
function forEach(obj, fn){
  if(obj === null || typeof obj === 'undefined'){
  	return;
  }
  
  // 如果不是object，放到数组中
  if(typeof obj !== 'object'){
    obj = [obj]
  }
  
  if(Array.isArray(obj)){
    for(let i=0;i<obj.length;i++){
      // 回调函数，this指向为null
      fn.call(null, obj[i], i, obj);
    }
  }else{
    for(let key in obj){
    	// 这里需要判断是否是自己身上的属性，不然会循环到prototype上去
      if(Object.prototype.hasOwnProperty(obj, key)){
        fn.call(null, obj[key], key, obj);
      }
    }
  }
}

extend(obj1, obj2, thisArg)

// 把obj2的属性和方法扩展到obj1
function extend(obj1, obj2, thisArg){
  // 遍历obj2
  forEach(obj2, function(val, key){
    // 如果有thisArg参数，并且val值为函数
  	if(thisArg && typeof val === 'function'){
      // 需要绑定this指向
      obj1[key] = bind(thisArg, val);
    }else{
    	obj1[key] = val;
    }
  });
  
  return obj1;
}

merge(​)

// 合并对象函数，优先级从右往左，也就是后面的参数优先级越高
function merge(/* obj1, obj2, obj3, ... */){
	let result = {};
  function assignValue(val, key){
    // b->a
    // a对象的一个key对应的值是object，并且b对象的值也是一个对象
    // 递归调用
  	if(typeof result[key] === 'object' && typeof val === 'object'){
    	result[key] = merge(result[key], val);
    }else if(typeof val === 'object'){
    	result[key] = merge({}, val);
    }else{
    	result[key] = val;
    }
  }
  
  for(let i=0;i<arguments.length;i++){
  	forEach(arguments[i], assignValue);
  }
  
  return result;
}

Axios核心函数

core/Axios.js
​

'use strict';
//Axios 构造函数


var utils = require('./../utils');
var buildURL = require('../helpers/buildURL');
var InterceptorManager = require('./InterceptorManager'); // 拦截器
var dispatchRequest = require('./dispatchRequest');	// 请求派发
var mergeConfig = require('./mergeConfig');	// 合并config函数

/**
 * Create a new instance of Axios
 * @param {Object} instanceConfig The default config for the instance
 */
function Axios(instanceConfig) {
  	// 实例上的默认配置
    this.defaults = instanceConfig;
  	// 实例上的拦截器
    this.interceptors = {
        request: new InterceptorManager(),
        response: new InterceptorManager()
    };
}

/**
 * 核心方法request
 * Dispatch a request
 * @param {Object} config The config specific for this request (merged with this.defaults)
 */
Axios.prototype.request = function request(config) {
    /*eslint no-param-reassign:0*/
    // Allow for axios('example/url'[, config]) a la fetch API
    /**
     * axios('http://www.baidu.com', {header:{}})
     */
  	// 对传入的参数做处理，支持axios(url,[,config]) 这中传参写法
    if (typeof config === 'string') {
        config = arguments[1] || {};
        config.url = arguments[0];
    } else {
        config = config || {};
    }
  	// 合并默认的参数和传入的参数
    config = mergeConfig(this.defaults, config);

    // Set config.method
    // 指定默认的请求方式get
    if (config.method) {
        config.method = config.method.toLowerCase();
    } else if (this.defaults.method) {
        config.method = this.defaults.method.toLowerCase();
    } else {
        config.method = 'get';
    }

    // Hook up interceptors middleware
    // 请求链，一个数组来维护发出真实请求前后要处理的事
    // 最终chain会长这样：
    // [请求拦截器1,请求拦截器2,..., dispatchRequest, undefined, 响应拦截器1,响应拦截器2...]
    var chain = [dispatchRequest, undefined];	// 派发请求，undefined占位用的
    var promise = Promise.resolve(config);//  promise 成功的Promise，带有config返回到下一个promise
  
    // 请求拦截器添加到数组的头，因为是请求拦截器嘛
    this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
        chain.unshift(interceptor.fulfilled, interceptor.rejected);
    });

    // 响应拦截器添加到数组的尾，最终返回的结果就是它，依然是promise
    this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
        chain.push(interceptor.fulfilled, interceptor.rejected);
    });

    // chain数组把要处理的事件方法排好了，接下来就是依次执行了
    while (chain.length) {
      	// 数组执行一个，就弹出数组
        promise = promise.then(chain.shift(), chain.shift());
    }

    return promise;
};

// 获取uri地址
Axios.prototype.getUri = function getUri(config) {
    config = mergeConfig(this.defaults, config);
    return buildURL(config.url, config.params, config.paramsSerializer).replace(/^\?/, '');
};

// 别名方法delete, get, head, options, 实际上也是调用request
// Provide aliases for supported request methods  axios.get  axios.post axios.put
utils.forEach(['delete', 'get', 'head', 'options'], function forEachMethodNoData(method) {
    /*eslint func-names:0*/
    Axios.prototype[method] = function (url, config) {
        return this.request(utils.merge(config || {}, {
            method: method,
            url: url
        }));
    };
});

// 与上面方法不同的是，需要传data
utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {
    /*eslint func-names:0*/
    Axios.prototype[method] = function (url, data, config) {
        return this.request(utils.merge(config || {}, {
            method: method,
            url: url,
            data: data
        }));
    };
});

module.exports = Axios;

InterceptorManager 拦截器

我们来看看拦截器做了些什么
core/InterceptorManager.js

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

// 拦截器的构造函数
function InterceptorManager() {
  // 实例属性handlers数组
  this.handlers = [];
}

/**
 * 把一个新的拦截器添加到这个实例的handlers数组上
 * 参数（fulfilled, rejected）其实是一个成功promise函数和一个失败的promise函数
 * 返回一个id，用作移除
 * Add a new interceptor to the stack
 * @param {Function} fulfilled The function to handle `then` for a `Promise`
 * @param {Function} rejected The function to handle `reject` for a `Promise`
 *
 * @return {Number} An ID used to remove interceptor later
 */
InterceptorManager.prototype.use = function use(fulfilled, rejected) {
  this.handlers.push({
    fulfilled: fulfilled,
    rejected: rejected
  });
  return this.handlers.length - 1;
};

/**
 * 通过id移除拦截器
 * Remove an interceptor from the stack
 * @param {Number} id The ID that was returned by `use`
 */
InterceptorManager.prototype.eject = function eject(id) {
  if (this.handlers[id]) {
    this.handlers[id] = null;
  }
};

/**
 * 迭代所有注册的拦截器
 * Iterate over all the registered interceptors
 * This method is particularly useful for skipping over any
 * interceptors that may have become `null` calling `eject`.
 *
 * @param {Function} fn The function to call for each interceptor
 */
InterceptorManager.prototype.forEach = function forEach(fn) {
  utils.forEach(this.handlers, function forEachHandler(h) {
    if (h !== null) {
      fn(h);
    }
  });
};

module.exports = InterceptorManager;

dispatchRequest 请求派发

到目前为止，我们并没有真实的发送一个请求，dispatchRequest也并不发送请求，它会去调用适配器（adapter）来做这件事（发送请求）
core/dispatchRequest.js

'use strict';
//发送请求的函数文件

var utils = require('./../utils');
var transformData = require('./transformData'); // 转换数据
var isCancel = require('../cancel/isCancel'); // 取消函数
var defaults = require('../defaults');

/**
 * 如果config配置里面有cancelToken配置，就抛一个异常
 * Throws a `Cancel` if cancellation has been requested.
 */
function throwIfCancellationRequested(config) {
    if (config.cancelToken) {
        config.cancelToken.throwIfRequested();
    }
}

/**
 * 派发一个请求 使用config里面的适配器
 * Dispatch a request to the server using the configured adapter.
 * @param {object} config The config that is to be used for the request
 * @returns {Promise} The Promise to be fulfilled
 */
module.exports = function dispatchRequest(config) {
    // 如果配置了取消请求
    throwIfCancellationRequested(config);

    // Ensure headers exist
    // 确保headers头存在
    config.headers = config.headers || {};

    // 转换请求data数据
    config.data = transformData(
        config.data,
        config.headers,
        config.transformRequest
    );

    // 扁平化，合并头
    config.headers = utils.merge(
        config.headers.common || {},
        config.headers[config.method] || {},
        config.headers
    );

    // 移除头里面的这些方法，
    // 既然要开始一个请求了，请求的配置config还是要做一些清理工作
    utils.forEach(
        ['delete', 'get', 'head', 'post', 'put', 'patch', 'common'],
        function cleanHeaderConfig(method) {
            delete config.headers[method];
        }
    );

    // 适配器，如果config里面设置了优先使用，否则用默认的
    var adapter = config.adapter || defaults.adapter;

    // 适配器返回一个promise，这是一个真正的请求
    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);
    });
};

mergeConfig合并对象

core/mergeConfig.js

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

/**
 * 合并两个对象，返回一个新对象
 * Config-specific merge-function which creates a new config-object
 * by merging two configuration objects together.
 * @param {Object} config1
 * @param {Object} config2
 * @returns {Object} New object resulting from merging config2 to config1
 */
module.exports = function mergeConfig(config1, config2) {
  // eslint-disable-next-line no-param-reassign
  config2 = config2 || {};
  var config = {};

  // 哪些值来自config2上的key
  var valueFromConfig2Keys = ['url', 'method', 'params', 'data'];
  // 需要深拷贝的值
  var mergeDeepPropertiesKeys = ['headers', 'auth', 'proxy'];
  // config2的默认key
  var defaultToConfig2Keys = [
    'baseURL', 'url', 'transformRequest', 'transformResponse', 'paramsSerializer',
    'timeout', 'withCredentials', 'adapter', 'responseType', 'xsrfCookieName',
    'xsrfHeaderName', 'onUploadProgress', 'onDownloadProgress',
    'maxContentLength', 'validateStatus', 'maxRedirects', 'httpAgent',
    'httpsAgent', 'cancelToken', 'socketPath'
  ];

  // 这些值来自config2上
  utils.forEach(valueFromConfig2Keys, function valueFromConfig2(prop) {
    if (typeof config2[prop] !== 'undefined') {
      config[prop] = config2[prop];
    }
  });

  // 优先使用config2上的，如果值是对象就深拷贝
  utils.forEach(mergeDeepPropertiesKeys, function mergeDeepProperties(prop) {
    if (utils.isObject(config2[prop])) {
      config[prop] = utils.deepMerge(config1[prop], config2[prop]);
    } else if (typeof config2[prop] !== 'undefined') {
      config[prop] = config2[prop];
    } else if (utils.isObject(config1[prop])) {
      config[prop] = utils.deepMerge(config1[prop]);
    } else if (typeof config1[prop] !== 'undefined') {
      config[prop] = config1[prop];
    }
  });

  // 设置默认值，优先使用config2上的
  utils.forEach(defaultToConfig2Keys, function defaultToConfig2(prop) {
    if (typeof config2[prop] !== 'undefined') {
      config[prop] = config2[prop];
    } else if (typeof config1[prop] !== 'undefined') {
      config[prop] = config1[prop];
    }
  });

  // 把所有的key合并到一个数组
  var axiosKeys = valueFromConfig2Keys
    .concat(mergeDeepPropertiesKeys)
    .concat(defaultToConfig2Keys);

  // 如果有axiosKeys以外的其他key，相当于用户自定义头
  // 这里用了set，数组去重
  var otherKeys = Array.from(
    new Set(Object.keys(config1).concat(Object.keys(config2)))
  ).filter((key) => {
    return axiosKeys.indexOf(key) === -1;
  });

  // 遍历其他keys，config2的优先级依然高于config1
  utils.forEach(otherKeys, function otherKeysDefaultToConfig2(prop) {
    if (typeof config2[prop] !== 'undefined') {
      config[prop] = config2[prop];
    } else if (typeof config1[prop] !== 'undefined') {
      config[prop] = config1[prop];
    }
  });

  // 返回一个合并的新的对象
  return config;
};

adapter适配器

这个适配器的作用是：判断是浏览器还是Node环境，
如果是浏览器环境，使用：XMLHttpRequest
如果是Node环境，使用：http，https
具体资料可以参考：XMLHttpRequest，http超文本传输协议

axios执行的流程