axios源码之模拟实现axios对象的创建

从axios的使用方法来看，我们不但可以通过axios()--函数调用的形式,也可以通过axios.get()形式，即调用axios对象的request,get,post等方法来实现发送异步请求的目的。那么Axios对象到底是怎么实现的呢，核心代码如下：

    //创建一个构造函数
    function Axios(config){
        //初始化
        this.defaults = config;
        this.interceptors = {
            request: {},
            response: {}
        }
    }
    //给Axios的原型对象添加方法
    Axios.prototype.request = function (config){
        console.log(`发起了请求 请求类型为${config.method}`)
    }
    Axios.prototype.get = function(config){
        return this.request({method: 'GET'}) //因为要用到this,因此这里不能用箭头函数
    }
    Axios.prototype.post = function(config){
        return this.request({method: 'POST'})
    }

    //创建一个生成axios的方法
    function createInstance(config){
        //创建一个Axios实例
        const context = new Axios(config);//此时context具有axios的所有方法和属性，例如context.get()，但不能直接使用context()形式进行调用
        //因此，需要创建一个函数,具有直接调用就能发起请求的功能
        const instance = Axios.prototype.request.bind(context);//此时调用instance()方法就能发起请求，但不具备其他属性，即不能使用instance.get()等属性
        //因此，需要将Axios.prototype上的属性添加到instance函数对象上
        Object.keys(Axios.prototype).forEach(key=>{
            instance[key] = Axios.prototype[key].bind(context);//使用bind将函数调用中的this绑定到实例上
        })
        //此时instance具备了get,request,post等方法，但没有defaults等属性
        Object.keys(context).forEach(key=>{
            instance[key] = context[key];
        })
        //将instance作为返回值返回
        return instance;
    }

    let axios = createInstance();
    //使用函数的形式调用
    axios({method:'GET'})
    //也可以使用方法调用
    axios.post()