异步代码改写为同步
phy-lei 2020-07-20
前端的那些事儿
# 场景
在很多情况下,异步代码的问题总是让我们头疼,很多时候,最简单粗暴的实现方法就是直接加个定时器,就不用去考虑代码层面的东西,但是如果,定时器设置的时间不足以异步代码执行完毕,问题还是没有得到解决,至此,我们应该怎么改写异步代码呢,接下来,就让我们来探讨异步代码,变伪同步代码实现。
# 异步代码改写
需要用得到的是async,及async的隐式promise,和await
//获取默认配置
async get_default_conf() {
const result = await get_default_dic("www.baidu.com")
if(result){
if(!this.time){
let res_key = Object.keys(result)
this.data = result[res_key[res_key.length-1]].data_view
}else{
this.data = result[this.time].data_view
}
}
}
因为数据控制着元素,在想要操控这个元素的dom时,必须要等待数据返回来回再操控元素,否则dom是undefined,不过可以用定时器实现这个功能
//这里nextTick加不加都没什么意义,因为是数据控制,而不是原来的静态dom,无论如何都要等待数据回来后才可以操作
this.$nextTick(() => {
setTimeout(()=>{
this.handleAreaChange('数据回来啦')
},100)
})
所以利用async的隐式promise实现,先做完A,再做B
//get_default_conf是用了async的,所以可以
this.get_default_conf().then(()=>{
this.handleAreaChange('数据回来啦')
})
因为async函数是也是一个隐式promise,这样就不用写promise了,可以用then回调,这里为什么不用await呢?大家可以看看event loop机制,这里不适合用await,因为我这里有好多层嵌套这个get_default_conf(),要用await的话,他的父层直到最外层都要写成await,显然看起来比较不好看,而且await主要的本质还是异步,并不会阻塞这个线程,不过是在代码层面上是同步而已。