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

Question

1. 接口调用
   

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);
           }
       }
   };

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

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