之前讲过promise和setTimeout之间的关系,今天看一个更为复杂的例子,夹杂promise,settimeout,async await:

之间讲过,promise的then是在同步事件执行完成之后就会执行,这种描述比较模糊,今天用一种新的概念来解释:宏任务,微任务。

宏任务常见的就是setTimeout,setInterval,这种就是在EventLoop中大块;微任务常见就是Promise的then,它们是在同步事件后执行的,属于小块。图示的如下:

background Layer 1 宏任务1 同步执行 微任务1 微任务2 宏任务2 同步执行 微任务1 微任务2

那么async中的await又是干嘛的呢?await首先会先阻塞,等返回东西,如果有东西返回,会将内容包装成Promise对象,然后等返回的Promise执行resolve或者reject再往下执行。

不过这里有一个隐形的坑,就是await要多执行一个then操作,因为await要完成一个赋值操作:

不管await前面有没有变量,都会执行这个then操作,那么相当于无形中创建了一个微任务。

现在让我们来看看上面那个demo的执行过程:

background Layer 1 async function f(){ console.log(1); await 'ok'; } f(); 宏任务1 1 await微任务 new Promise((resolve,reject)=>{ console.log(3);resolve(); }).then(()=>{console.log(4);}); 宏任务1 1 promise微任务:4 3 await微任务 setTimeout(function(){ console.log(5); }); 宏任务1 1 promise微任务:4 3 await微任务 console.log(2) 2 2 2 宏任务2 5 console.log(6); 宏任务1 1 promise微任务:4 3 await微任务 2 宏任务2 5 6

结果:136245,注意上面的2,因为他被await的微任务阻塞了,一旦await执行完,就会执行2。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字