揭秘axios：两种调用方式背后的天才设计

揭秘axios：两种调用方式背后的天才设计

axios作为前端开发中常用的HTTP请求库，其两种调用方式一直备受开发者关注。本文将深入解析axios的实现原理，帮助读者理解其设计思路。

axios的两种调用方式

经常调用接口的开发者一定对axios的两种使用方式非常熟悉：

• axios(config)

// 配置式请求
axios({
  method: 'post',
  url: '/user/12345',
});

• axios.post(url, config)

// 简洁的写法
axios.post('/user/12345')

你是否思考过这样的问题：axios到底是什么？为什么可以使用这两种方式调用接口？其设计原理是什么？

axios原理简析

为了搞清楚这些问题，我们先仿照axios源码实现一个简单的版本。

创建一个构造函数

function Axios(config){
  this.defaults = config; // 配置对象
  this.interceptors = { // 拦截器对象
    request:{},
    response:{}
  }
}

原型上添加方法

Axios.prototype.request = function(config){
  console.log('发送Ajax 请求 type:' +config.method)
}
Axios.prototype.get = function(){
  return this.request({method:'GET'})
}
Axios.prototype.post = function(){
  return this.request({method: 'POST'})
}

创建实例对象：

let axios = new Axios(config) 

此时的axios是一个实例对象，包含defaults和interceptors属性，原型上包含request、get及post方法。但是，此时的axios不能使用axios(config)的形式调用接口。

axios的天才设计

为了同时支持axios(config)和axios.get()的调用方式，axios采用了以下核心设计：

function createInstance(config) {
  const instance = Axios.prototype.request; 
  instance.get = Axios.prototype.get
  instance.post = Axios.prototype.post
  return instance;
}
let axios = createInstance();

通过上述代码，我们可以看到：

• axios是createInstance()函数的返回值instance
• instance是一个函数，因此可以使用axios(config)
• instance也是一个对象，其原型上有get方法和post方法，因此可以使用axios.post()

axios的源码实现

function createInstance(config) {
  var context = new Axios(config);
  var instance = Axios.prototype.request.bind(context);
  Object.keys(Axios.prototype).forEach(key => {
    instance[key] = Axios.prototype[key].bind(context);
  })
  Object.keys(context).forEach(key => {
    instance[key] = context[key];
  })
  return instance;
}

这段代码精妙之处在于：

• 通过bind方法确保request方法内部的this指向正确
• 通过原型链继承实现方法复用
• 通过对象属性赋值实现功能扩展

总结

axios的设计思路充分体现了JavaScript语言的灵活性，通过巧妙地运用原型链和函数绑定，实现了简洁而强大的API设计。理解这些设计原理，不仅能帮助我们更好地使用axios，还能提升我们的编程能力。