Axios支持对象和函数调用方式,实现原理是什么?

15 min read

axios可以使用对象和函数两种方式调用,这是因为它在createInstance方法中做了处理。

当我们使用axios对象时,实际上是默认创建了一个实例,然后调用该实例的方法进行请求等操作。

而当我们使用axios.create方法时,会创建一个新的实例,且该实例与默认实例无关,可以单独定制拦截器、配置等参数。

下面是代码实现:

function createInstance(defaultConfig) {
  var context = new Axios(defaultConfig);
  // 添加axios原型上的函数到上下文对象
  var instance = bind(Axios.prototype.request, context);

  // 添加axios原型上的属性到上下文对象
  utils.extend(instance, Axios.prototype, context);

  // 添加axios属性到上下文对象
  utils.extend(instance, context);

  return instance;
}

// 创建一个默认实例
var axios = createInstance(defaults);

// 创建一个新的实例,该实例是由默认实例克隆得到的,并独立于默认实例
axios.create = function create(instanceConfig) {
  return createInstance(mergeConfig(axios.defaults, instanceConfig));
};

需要注意,当我们使用函数方式调用时,实际上是调用默认实例的request方法,而在该方法内部也是通过创建实例来实现请求。