模擬axios的創建[ 實現調用axios()自身發送請求或調用屬性的方法發送請求axios.request() ]

• 2022 年 1 月 19 日
• 筆記
• 實現調用axios()自身發送請求或調用屬性的方法發送請求axios.request()

1、axios 函數對象（可以作為函數使用去發送請求，也可以作為對象調用request方法發送請求）

❀ 一開始axios是一個函數，但是後續又給它添加上了一些屬性【 方法屬性】

■ 舉例子（axios 函數對象調用axios()自身發送請求或調用屬性的方法axios.request()發送請求的原理）：

<script>
//一開始a只是一個函數
    var a = function () {
        console.log('hi');
    }
    var fn = function () {
        console.log('hi');
    }
    //給a這個函數對象添加屬性後，讓它的屬性指向某個函數，則a調用自身函數，或者調用屬性fn的方法----效果是一樣的
    a.fn = fn;
    console.log(a);
    console.dir(a);
    a();
    a.fn();
</script>

✿ 模擬axios的創建代碼如下（bind函數的作用：主要是修改this指向，指向axios的實例）：

<script>
    //構造函數
    function Axios(config) {
        //初始化
        this.defaults = config;//default默認屬性
        this.intercepters = {
            request: {},
            response: {}
        }
    }

    //為類的原型添加相關方法
    Axios.prototype.request = function (config) {
        console.log('發送ajax請求,請求類型:' + config.method)
    }
    Axios.prototype.get = function (config) {
        return this.request({method: 'GET'})
    }
    Axios.prototype.post = function (config) {
        return this.request({method: 'POST'})
    }

    //聲明函數
    function createInstance(config) {
        //實例化一個對象
        var context = new Axios(config); //實例對象可以調用方法，例如 context.get() 但是不能直接當函數使用 context（） ×
        var instance = Axios.prototype.request.bind(context);//instance 是一個函數，並且可以 instance({})，
        // 但是因為bind返回的是一個函數（一個擁有了Axios.prototype.request() 方法的函數，而instance的參數就是Axios的實例），所以不能 instance.get()

        //將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];
        })

        // console.dir(instance);
        return instance;
    }

    //測試一下axios的創建過程
    let axios = createInstance();
    //發送Ajax請求
    axios({method: 'POST'});
    axios.post({});
</script>