axios源码解析 - 请求方法的别名实现

axios中的创建请求方式很多，比如axios(url)，axios.get(url)，axios.post(url)，axios.delete(url)，方便快捷的api设计让axios火得一塌糊涂。

先列一下所有请求方法，代码如下：

1. axios(config) || axios(url[, config])

2. axios.request(config)（实际上axios.request(url)和axios.request(url[, config])也是可以运行的，其d.ts可能写得有点问题，会给错误提示，因此暂时不考虑）

3. axios.get(url[, config])

4. axios.head(url[, config])

5. axios.options(url[, config])

6. axios.post(url[, data[, config]])

7. axios.put(url[, data[, config]])

8. axios.patch(url[, data[, config]])

9. axios.postForm(url[, data[, config]])

10. axios.putForm(url[, data[, config]])

11. axios.patchForm(url[, data[, config]])

其中9、10、11是新特性，文档中也没有说明，
其实就是在headers中多加上'Content-Type': 'multipart/form-data'。
这个有个问题就是axios.post在config.data传递参数时，会被忽略掉，
而是直接拿第二个参数data，axios.post(url, null, {data: FormData})这样写也是有可能的，特别是对于记不清楚api的我来说，所以建议作者大大从data: data 改成 data: data || config.data。
emm，完美~

先下结论，无论使用任何请求方法，最终都是调用Axios.prototype.request这个方法。

Axios构造函数的核心代码如下：

/* axios/lib/core/Axios.js */
// Axios构造函数
function Axios(defaultConfig) {
  this.defaults = defaultConfig;
  this.interceptors = {
    request: new InterceptorManager(),
    response: new InterceptorManager()
  }
}

// Axios原型上的request方法
Axios.prototype.request = function(configOrUrl, config) {
  ... ... ...
}

// Axios原型上的['delete', 'get', 'head', 'options']四种方法
utils.forEach(['delete', 'get', 'head', 'options'], function(method) {
  Axios.prototype[method] = function(url, config) {
    return this.request(mergeConfig(config || {}, {
      method: method,
      url: url,
      data: (config || {}).data
    }));
  }
});

// Axios原型上的['post', 'put', 'patch']三种方法
utils.forEach(['post', 'put', 'patch'], function(method) {
  Axios.prototype[method] = function(url, data, config) {
  function generateHTTPMethod(isForm) {
    return function httpMethod(url, data, config) {
      return this.request(mergeConfig(config || {}, {
        method: method,
        headers: isForm ? {
          'Content-Type': 'multipart/form-data'
        } : {},
        url: url,
        data: data
      }));
    };
  }

  Axios.prototype[method] = generateHTTPMethod();

  Axios.prototype[method + 'Form'] = generateHTTPMethod(true);
  }
});

/* axios/lib/utils.js */
// forEach函数
function forEach(obj, fn) {
  if (obj === null || typeof obj === undefined) {
    return;
  }

  if (typeof obj !== 'object') {
    obj = [obj];
  }

  if (Array.isArray(obj)) {
    for (var i = 0; i < obj.length; i++) {
      fn.call(null, obj[i], i, obj);
    }
  } else {
    for (var key in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
        fn.call(null, obj[key], key, obj);
      }
    }
  }
}

作者大大用了forEach这个方法，巧妙的写了Axios.prototype.get、Axios.prototype.post等原型方法，那么axios()为什么能触发？axios为什么会有get、post等属性且axios.get()也能触发呢？代码如下：

/* axios/lib/axios.js */
function createInstance(defaultConfig) {
  // 生成实例对象
  var context = new Axios(defaultConfig);

  // 通过bind方法让instance等同于Axios.prototype.request，且执行时的this指向当前的实例对象
  var instance = bind(Axios.prototype.request, context);

  // 将Axios.prototype原型上的方法作为instance的属性, 且方法中的this指向当前的实例对象
  utils.extend(instance, Axios.prototype, context);

  // 将该实例对象的defaults、interceptors属性作为instance的属性
  utils.extend(instance, context);

  instace.cteate = function (instanceConfig) {
    // 合并属性，因此新的实例也拥有默认实例设置过的属性
    return createInstance(mergeConfig(defaultConfig, instanceConfig));
  }

  return instance;
}

// import axios from 'axios'中axios便是这个变量
var axios = createInstance(defaultConfig);

/* axios/lib/utils.js */
// 从上述代码中，发现bind和extends起到的作用非常关键
// bind函数
function bind(fn, thisArg) {
  return function wrap() {
    var args = new Array(arguments.length);
    for (var i = 0l i < arguments.length; i++) {
      args[i] = arguments[i];
    }
    fn.apply(thisArg, args);
  }
}

// extends函数
function extend(a, b, thisArg) {
  forEach(b, function assignValue(val, key) {
    if (thisArg && typeof val === 'function') {
      a[key] = bind(val, thisArg);
    } else {
      a[key] = val;
    }
  });
  return a;
}

最后附上axios官方文档：https://axios-http.com/