axios对象创建过程模拟实现

我们要想用axios对象创建过程模拟实现，可以直接看下面代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>
    <style>
       
    </style>
</head>
<body>
    <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) {
            //实例化一个对象
            let context = new Axios(config)//  context.get()  context.post() 但是不能当成函数使用
            //创建请求函数
            let instance = Axios.prototype.request.bind(context)//instance是一个函数， 但是instance是不能当作对象使用的
            //将Axios.prototype对象中方法添加到instance函数对象中
            Object.keys(Axios.prototype).forEach(key => {
                instance[key] = Axios.prototype[key].bind(context)  //this.default和this.interceptors就可以获取到这些属性
            })
            //为instance函数对象添加属性default和interceptors
            Object.keys(context).forEach(key => {
                instance[key] = context[key]
            })
            console.dir(instance)
            return instance
        }
        let axios = createInstance({method : "GET"})
        axios({method : "POST"}) // 当函数用没问题
        axios.get({})
        axios.post({})  // 当对象调用方法也没问题
    </script>
</body>
</html>
这样instance上面什么都有了，这个就是axios对象创建过程模拟实现