zoukankan      html  css  js  c++  java
  • 模拟axios的创建[ 实现调用axios()自身发送请求或调用属性的方法发送请求axios.request() ]


    ■ axios创建的源码:

    □ 起初axios【instance=bind(Axios.prototype.request, context);】是一个函数,在调用axios(config)函数发送请求时,实际上是调用Axios.prototype.request(config) 方法

    □ 在后续【 utils.extend(instance, Axios.prototype, context);】又将Axios原型上的方法属性添加到instance身上。所以axios可以调用属性axios.request(config)发送请求

    ❀ 我们知道直接调用axios(config) 发送Ajax请求,实际上是通过Axios.prototype.requst(config) 发送Ajax请求



    ✿ 模拟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>
    

    本文来自博客园,作者:一乐乐,转载请注明原文链接:https://www.cnblogs.com/shan333/p/15824175.html

  • 相关阅读:
    创建image对象出现内存不足
    错误15023:当前数据库中已存在用户或角色
    看20遍还觉得很搞笑之<麦兜故事>片段之"鱼丸粗面"
    .NET中获取CPU编号及MAC地址
    清空file控件的值
    iframe 父窗口和子窗口的调用方法
    调用javascript后gif动画停止播放
    IIS上无法播放FLV视屏的问题
    黑客和小白
    (转载)innerHTML,innerTEXT,outerHTML的区别
  • 原文地址:https://www.cnblogs.com/shan333/p/15824175.html
Copyright © 2011-2022 走看看