容姿脩嫮
新手
新手
  • 最后登录2023-11-02
  • 发帖数4
阅读:6710回复:3

[vue]将ajax请求返回值赋值给vue全局变量

楼主#
更多 发布于:2019-10-25 15:31
在vue中定义一个全局变量
data(){
  return{
    info:{}
  }
}




简写一段ajax请求
$.ajax({ 
 url: "./jfdata.json",  
 data:requestData, 
 type: "GET",  
 success: function(data){  
   this.info=data
   console.log(this.info)//info的值为请求返回的data的值
 } 
});
console.log(this.info)//info的值依旧为定义的值

在页面渲染
info<p>pw_info</p>
完成上面三步,你会发现页面渲染的info还是定义的值,并未拿到ajax返回值。原因:默认的ajax 方法是异步请求,在整个页面加载后,才执行了ajax方法。

那么如何解决这个问题呢?下面提供了几个方法
方法一.最直接的办法:异步改同步

$.ajax({
 url: "./jfdata.json", 
 data:requestData,
 type: "GET",  
 async:false,//像这样加一行
 success: function(data){ 
   this.info=data
   console.log(this.info)//info的值为请求返回的data的值
 }
});
console.log(this.info)//info的值为请求返回的data的值
注意,如果你的请求有dataType:"jsonp"异步改同步是不起作用的,可以切换其他方式处理跨域
方法二.setTimeout(适用于在请求之前操作简单的时间短的情况思路:setTimeout包起来,设置时间为0,抢在页面加载前执行ajax请求
setTimeout(function(){
$.ajax({
 url: "./jfdata.json",
 data:requestData,
 type: "GET", 
 success: function(data){
   this.info=data
   console.log(this.info)//info的值为请求返回的data的值[/color]
 }
});
console.log(this.info)//info的值为请求返回的data的值
},0)
ぃ菜鸟
贫民
贫民
  • 最后登录2020-07-08
  • 发帖数5
沙发#
发布于:2019-10-30 12:25
楼主这个方法是可以但是我觉得你也可以试试 this.$nextTick哈哈,个人觉得
doubleyong
管理员
管理员
  • 最后登录2024-03-15
  • 发帖数1164
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
板凳#
发布于:2019-10-28 10:06
容姿脩嫮:后面还有方法,等我后期更新回到原帖
坐等更新
知识需要管理,知识需要分享
容姿脩嫮
新手
新手
  • 最后登录2023-11-02
  • 发帖数4
地板#
发布于:2019-10-25 15:39
后面还有方法,等我后期更新
游客


返回顶部

公众号

公众号