vue生命周期中调用的方法无法获取data中的数据

在Vue项目的created阶段,由于JS事件循环机制,使用异步请求填充的data在后续方法中无法及时获取。本文讨论了Event Loop、宏任务与微任务的概念,并提供了解决在created中调用方法无法获取data中数据的方案。

今天写项目遇见了一个坑,在created函数中调用了三个方法

created() {
    this.getData();
    this.getDetail();
    this.getCategory();
  }

如以上写法,getDetail()和getCategory()是通过promise异步请求,将数据写入到data中,我调用getData()方法无法拿到data中的数据,通过写日志一步一步确认错误时,发现getData()方法比获取数据的这两个方法先执行。

通过询问大佬发现是JS事件循环搞的鬼
什么是JS的事件循环机制?

Event Loop
宏任务(macro-task)和微任务(micro-task)

宏任务:包括整体代码script,setTimeout,setInterval
微任务:Promise.then(非new Promise),process.nextTick(node中)
原来script是宏任务,要先执行完宏任务才能执行异步中的微任务

事件的执行顺序,是先执行宏任务,然后执行微任务,这个是基础,任务可以有同步任务和异步任务,同步的进入主线程,异步的进入Event Table并注册函数,异步事件完成后,会将回调函数放入Event Queue中(宏任务和微任务是不同的Event Queue),同步任务执行完成后,会从Event Queue中读取事件放入主线程执行,回调函数中可能还会包含不同的任务,因此会循环执行上述操作。

所以拿不到data中的数据,我用了笨一点的方法就是把方法写在异步函数内,在获取数据结束后直接执行方法便拿到数据了。

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值