飙血推荐
  • HTML教程
  • MySQL教程
  • JavaScript基础教程
  • php入门教程
  • JavaScript正则表达式运用
  • Excel函数教程
  • UEditor使用文档
  • AngularJS教程
  • ThinkPHP5.0教程

模拟axios的创建[ 实现调用axios()自身发送请求或调用属性的方法发送请求axios.request() ]

时间:2022-01-21  作者:shan333  

1、axios 函数对象(可以作为函数使用去发送请求,也可以作为对象调用request方法发送请求)

❀ 一开始axios是一个函数,但是后续又给它添加上了一些属性【 方法属性】


■ 举例子(axios 函数对象调用axios()自身发送请求或调用属性的方法域名est()发送请求的原理):

<script>
//一开始a只是一个函数
    var a = function () {
        域名(\'hi\');
    }
    var fn = function () {
        域名(\'hi\');
    }
    //给a这个函数对象添加属性后,让它的属性指向某个函数,则a调用自身函数,或者调用属性fn的方法----效果是一样的
    域名 = fn;
    域名(a);
    域名(a);
    a();
    域名();
</script>


✿ 模拟axios的创建代码如下(bind函数的作用:主要是修改this指向,指向axios的实例):

<script>
    //构造函数
    function Axios(config) {
        //初始化
        域名ults = config;//default默认属性
        域名rcepters = {
            request: {},
            response: {}
        }
    }

    //为类的原型添加相关方法
    域名est = function (config) {
        域名(\'发送ajax请求,请求类型:\' + 域名od)
    }
    域名 = function (config) {
        return 域名est({method: \'GET\'})
    }
    域名 = function (config) {
        return 域名est({method: \'POST\'})
    }

    //声明函数
    function createInstance(config) {
        //实例化一个对象
        var context = new Axios(config); //实例对象可以调用方法,例如 域名() 但是不能直接当函数使用 context() ×
        var instance = 域名域名(context);//instance 是一个函数,并且可以 instance({}),
        // 但是因为bind返回的是一个函数(一个拥有了域名est() 方法的函数,而instance的参数就是Axios的实例),所以不能 域名()

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

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

        // 域名(instance);
        return instance;
    }

    //测试一下axios的创建过程
    let axios = createInstance();
    //发送Ajax请求
    axios({method: \'POST\'});
    域名({});
</script>

标签:编程
湘ICP备14001474号-3  投诉建议:234161800@qq.com   部分内容来源于网络,如有侵权,请联系删除。