promise、async和await的执行顺序

原创 minsong 随笔 es6 152阅读 2018-06-22 16:06:27 举报

1.题目

关于异步得内容,我也经常是比较混,最近看到一道题目,是关于异步一块的内容,具体内容:下面这段promise、async和await代码,请问控制台打印的顺序?

大家可以自己试一下,看看自己能不能输出正确哦~

2.知识点

这道题目考的其实是以下几个点:
1.promise的回调函数执行
2.async表达式的返回值
3.await表达式的作用和返回值
4.调用栈
5.事件循环
6.任务队列

正确答案:

显然,这考察的是js中的事件循环和回调队列。注意以下几点:
1.Promise优先于setTimeout宏任务。所以,setTimeout回调会在最后执行。
2.Promise一旦被定义,就会立即执行。
3.Promise的reject和resolve是异步执行的回调。所以,resolve()会被放到回调队列中,在主函数执行完和setTimeout前调用。
4.await执行完后,会让出线程。async标记的函数会返回一个Promise对象

3.难点

最令人困惑的,就是async1 end在promise2之后输出
在函数async1中,执行promise(由于async2是async标记的函数,所以默认返回promise对象)会发现resolve(),然后放入回调队列。
接着执行下方的new Promise中的resolve()输出promise2,再回来输出async1 end。
其中,async1函数可以写成以下方式(便于理解):

4.流程

1.console.log('script start')输出:script start
2.setTimeout被放在最后调用
3.执行async1函数,输出async1 start。然后,进入async2函数,输出async2,并返回Promise对象。回到async1,由于await,让出线程,async2函数返回的Promise放在回调队列。
4.新new了一个Promise对象,输出promise1。其中的resolve()被放在回调队列。
5.console.log('script end')输出:script end
6.执行回调队列中,async1返回的Promise对象,对象产生的resolve被放入对调队列。这里不输出任何值。
7.执行回调队列中,下方Promise显式声明的resolve,输出promise2。
8.执行回调队列中,由于async1函数返回的promise对象的resolve,输出async1 end。
9.执行回调队列中,最后的setTimeout,输出setTimeout
10.finish

5.参考

promise、async和await之执行顺序的那点事
半年工作经验今日头条和美团面试题面经分享
async/await 在chrome 环境和 node 环境的 执行结果不一致,求解?

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复