问题描述

axios向后端请求数据,在赋值时发现只有在axios中才有数据,而axios外访问数据就是空的

在created()中调用请求数据与处理数据的方法

代码:

怎么让axios不是异步的 axios异步请求导致没有数据_前端


前端没有数据

怎么让axios不是异步的 axios异步请求导致没有数据_axiox_02

输出

怎么让axios不是异步的 axios异步请求导致没有数据_怎么让axios不是异步的_03


可以从控制台输出结果看到,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中处理异步可以有很多方法。