Vue中axios请求数据赋值不成功——javascript任务队列

问题描述

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中处理异步可以有很多方法，推荐一篇文章传送门