问题描述
axios向后端请求数据,在赋值时发现只有在axios中才有数据,而axios外访问数据就是空的
在created()中调用请求数据与处理数据的方法
代码:
前端没有数据
输出
可以从控制台输出结果看到,axios外的数据是空的
原因分析:
从上面的输出结果也能看到一些端倪,not in axios的输出顺序在 in axios之前,created中调用了请求数据与处理方法,但请求是异步执行的,在发送请求数据的后,then中的回调函数等待后端接口返回数据后才执行,而浏览器不可能一直等着,于是接着执行下面的代码,而这时的数据还是空的,所以输出的数据是空的,最终渲染的时候也是空数据
- 2022-.3-24更新
今天看了一点关于js事件循环、任务队列的知识,链接在这
所以出现上面问题的原因就是:axios发送请求后,其回调函数加入了任务队列中等待主线程调用
,而axios外的这个输出任务直接进入了主线程,而此时数据处理的回调函数还在任务队列中(微任务)等待主线程执行完栈中的任务后调用,所以输出的就是空的
解决方案:
方法一:如果是与处理得数据,将请求数据放在回调函数中;
如果不是马上要渲染的数据,可以在需要的时候(事件触发时)再处理。
方法二:在created中将处理数据的方法延时
clearTimeout(this.timer); //清除延迟执行
this.timer = setTimeout(()=>{ //设置延迟执行
this.getAirports();
},2000);
- 2022-7.21更新
之前虽然知道了原因,但其实也是一知半解,干了也有一段时间了,对于这些东西也有了一些认识,再加上最近也在学习,所以现在回过头看,很多东西也就清晰了,同时方法二现在看来,并不好,可以对于要显示的数据在标签中使用v-if指令判断,使得当这个数据满足条件的时候再去渲染这一块的html 对于js中处理异步可以有很多方法,推荐一篇文章传送门