看完这篇文章，使用Axios得实力大涨

#在我们调用接口时，axios的使用方式有两种方式：

axios.post(url,config)

axios({
    method: 'post',
    url: '/xjtx/admin'
});

axios(config)

axios({
    method: 'post',
    url: 'xjtx/admin'
});

但是，在我们使用的过程中，有没有想过这么一个问题，如果我们按照传统的思路方式依据axios源码去实现一个简单的axios。

1.首先我在这里手写一个axios的简单版：

(1) 创造一个构造函数

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

我们可以看出。在上面的代码中，实现了一个简单的axios类，然后接下来给它添加功能

2.原型上添加方法

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'})
}

上面的代码中，我们在request属性上创建了一个通用的接口请求方法，get和post实际都调用了request，但内部传递了不同的参数，这和axios(config)、axios.post()有异曲同工之妙。

3.现在，我们需要创建实例对象

let aixos = new Axios(config) 

aixos的源码实现

function createInstance(config) {
   //实例化一个对象
   var context = new Axios(config); //但是不能直接当函数使用
   
   var instance = Axios.prototype.request.bind(context);
   //instance 是一个函数，并且可以 instance({})，

   //将Axios.prototype 对象中的方法添加到instance函数中,让instance拥有get、post、request等方法属性
   Object.keys(Axios.prototype).forEach(key => {
     // console.log(key); //修改this指向context
     instance[key] = Axios.prototype[key].bind(context);
   })
   //总结一下，到此instance自身即相当于Axios原型的request方法，
   //然后又给instance的属性添加了上了Axios原型的request、get、post方法属性
   //然后调用instance自身或instance的方法属性时，修改了this指向context这个Axios实例对象

   //为instance函数对象添加属性 default 与 intercetors
   Object.keys(context).forEach(key => {
     instance[key] = context[key];
   })

   return instance;
 }