为什么直接链接引入的vue在使用接口的时候,放在created中每次调用都要使用定时器才能管用?

soulninu
  • 61
  1. 接口调用
    c742c851e9e87e85a1d448e7c83422e.png
  2. vue引入方式

    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>~~~~
  3. ajax的配置

    var AjaxUtil = {
    
        // 基础选项
        options: {
            method: "get", // 默认提交的方法,get post
            url: "", // 请求的路径 required
            params: {}, // 请求的参数
            type: 'text', // 返回的内容的类型,text,xml,json
            callback: function () {
            }// 回调函数 required
        },
    
        // 创建XMLHttpRequest对象
        createRequest: function () {
            var xmlhttp;
            try {
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");// IE6以上版本
            } catch (e) {
                try {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");// IE6以下版本
                } catch (e) {
                    try {
                        xmlhttp = new XMLHttpRequest();
                        if (xmlhttp.overrideMimeType) {
                            xmlhttp.overrideMimeType("text/xml");
                        }
                    } catch (e) {
                        alert("您的浏览器不支持Ajax");
                    }
                }
            }
            return xmlhttp;
        },
        // 设置基础选项
        setOptions: function (newOptions) {
            for (var pro in newOptions) {
                this.options[pro] = newOptions[pro];
            }
        },
        // 格式化请求参数
        formateParameters: function () {
            var paramsArray = [];
            var params = this.options.params;
            for (var pro in params) {
                var paramValue = params[pro];
                /*if(this.options.method.toUpperCase() === "GET")
                {
                    paramValue = encodeURIComponent(params[pro]);
                }*/
                paramsArray.push(pro + "=" + paramValue);
            }
            return paramsArray.join("&");
        },
    
        // 状态改变的处理
        readystatechange: function (xmlhttp) {
            // 获取返回值
            var returnValue;
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                switch (this.options.type) {
                    case "xml":
                        returnValue = xmlhttp.responseXML;
                        break;
                    case "json":
                        var jsonText = xmlhttp.responseText;
                        if (jsonText) {
                            returnValue = eval("(" + jsonText + ")");
                        }
                        break;
                    default:
                        returnValue = xmlhttp.responseText;
                        break;
                }
                if (returnValue) {
                    this.options.callback.call(this, returnValue);
                } else {
                    this.options.callback.call(this);
                }
            }
        },
    
        // 发送Ajax请求
        request: function (options) {
            var ajaxObj = this;
    
            // 设置参数
            ajaxObj.setOptions.call(ajaxObj, options);
    
            // 创建XMLHttpRequest对象
            var xmlhttp = ajaxObj.createRequest.call(ajaxObj);
    
            // 设置回调函数
            xmlhttp.onreadystatechange = function () {
                ajaxObj.readystatechange.call(ajaxObj, xmlhttp);
            };
    
            // 格式化参数
            var formateParams = ajaxObj.formateParameters.call(ajaxObj);
    
            // 请求的方式
            var method = ajaxObj.options.method;
            var url = ajaxObj.options.url;
            if (url.indexOf("http") === -1) {
                url = "http://localhost:8080/" + url
            }
    
            if ("GET" === method.toUpperCase()) {
                url += "?" + formateParams;
            }
    
            // 建立连接
            xmlhttp.open(method, url, true);
    
            if ("GET" === method.toUpperCase()) {
                xmlhttp.send(null);
            } else if ("POST" === method.toUpperCase()) {
                // 如果是POST提交,设置请求头信息
                xmlhttp.setRequestHeader("Content-Type",
                    "application/x-www-form-urlencoded");
                xmlhttp.send(formateParams);
            }
        }
    };
回复
阅读 169
3 个回答

setTimeout 等于把任务移动到了下一个宏任务中,这样在某些场景中等同于在 mounted 执行(也就是节点挂载后)。

当然还有可能是你的资源顺序不对获取不到。

也有可能你里面有操作dom。

应该是生命周期问题,created 调用时间点在 vue 做好一切整备,开始渲染 html 之前,也就是放在 created 中的方法是不能找到组件的 html 元素(dom节点)的,因此在 created 中调用类似 this.$refs.dom 一定会报错!

如果需要在 html 渲染完成之后进行操作,则应该把代码放到 mounted 函数中。

之所以使用 setTimeout 之后也不会报错,是因为 setTimeout 是异步执行的, 本次周期执行完成之后 html 也已经被渲染好了,自然就不会再报错了。

你这些方法里面是不是有直接操作dom元素的代码了,在create的时候dom还没创建呢

你知道吗?

宣传栏