8张图帮你一步步看清 async/await 和 promise 的执行顺序

249

8张图让你一步步看清 async/await 和 promise 的执行顺序

  • 为什么写这篇文章?
  • 测试一下自己有没有必要看
  • 需要具备的前置基础知识
  • 主要内容

    • 对于async await的理解
    • 画图一步步看清宏任务、微任务的执行过程

为什么写这篇文章?

说实话,关于js的异步执行顺序,宏任务、微任务这些,或者async/await这些慨念已经有非常多的文章写了。

但是怎么说呢,简单来说,业务中很少用async,不太懂async呢,

研究了一天,感觉懂了,所手痒想写一篇 ,哈哈

毕竟自己学会的知识,如果连表达清楚都做不到,怎么能指望自己用好它呢?

测试一下自己有没有必要看

所以我写这个的文章,主要还是交流学习,如果您已经清楚了eventloop/async/await/promise这些东西呢,可以 break 啦

有说的不对的地方,欢迎留言讨论,

那么还是先通过一道题自我检测一下,是否有必要继续看下去把。

其实呢,这是去年一道烂大街的「今日头条」的面试题

我觉得这道题的关键,不仅是说出正确的打印顺序,更重要的能否说清楚每一个步骤,为什么这样执行。


    async function async1() {
        console.log( 'async1 start' )
        await async2()
        console.log( 'async1 end' )
    }
    
    async function async2() {
        console.log( 'async2' )
    }
    
    console.log( 'script start' )
    
    setTimeout( function () {
        console.log( 'setTimeout' )
    }, 0 )
    
    async1();
    
    new Promise( function ( resolve ) {
        console.log( 'promise1' )
        resolve();
    } ).then( function () {
        console.log( 'promise2' )
    } )
    
    console.log( 'script end' )
注:因为是一道前端面试题,所以答案是以浏览器的eventloop机制为准的,在node平台上运行会有差异。
     script start
     async1 start
     async2
     promise1
     script end
     promise2
     async1 end
     setTimeout

如果你发现运行结果跟自己想的一样,可以选择跳过这篇文章啦,

或者如果你有兴趣看看俺俩的理解有没有区别,可以跳到后面的 「画图讲解的部分」

需要具备的前置知识

  • promise的使用经验
  • 浏览器端的eventloop

不过如果是对 ES7 的 async 不太熟悉,是没关系的哈,因为这篇文章会详解 async。

那么如果不具备这些知识呢,推荐几篇我觉得讲得比较清楚的文章

主要内容

第1部分:对于async await的理解

我推荐的那篇文章,对 async/await 讲得更详细。不过我希望自己能更加精炼的帮你理解它们

这部分,主要会讲解 3 点内容

  • 1.async 做一件什么事情?
  • 2.await 在等什么?
  • 3.await 等到之后,做了一件什么事情?
  • 4.补充: async/await 比 promise有哪些优势?(回头补充)
1.async 做一件什么事情?

一句话概括: 带 async 关键字的函数,它使得你的函数的返回值必定是 promise 对象

也就是

如果async关键字函数返回的不是promise,会自动用Promise.resolve()包装

如果async关键字函数显式地返回promise,那就以你返回的promise为准

这是一个简单的例子,可以看到 async 关键字函数和普通函数的返回值的区别

async function fn1(){
    return 123
}

function fn2(){
    return 123
}

console.log(fn1())
console.log(fn2())
Promise {<resolved>: 123}

123

所以你看,async 函数也没啥了不起的,以后看到带有 async 关键字的函数也不用慌张,你就想它无非就是把return值包装了一下,其他就跟普通函数一样。

关于async关键字还有那些要注意的?

  • 在语义上要理解,async表示函数内部有异步操作
  • 另外注意,一般 await 关键字要在 async 关键字函数的内部,await 写在外面会报错。
2.await 在等什么?

一句话概括: await等的是右侧「表达式」的结果

也就是说,

右侧如果是函数,那么函数的return值就是「表达式的结果」

右侧如果是一个 'hello' 或者什么值,那表达式的结果就是 'hello'

async function async1() {
    console.log( 'async1 start' )
    await async2()
    console.log( 'async1 end' )
}
async function async2() {
    console.log( 'async2' )
}
async1()
console.log( 'script start' )

这里注意一点,可能大家都知道await会让出线程,阻塞后面的代码,那么上面例子中, 'async2' 和 'script start' 谁先打印呢?

是从左向右执行,一旦碰到await直接跳出, 阻塞async2()的执行?

还是从右向左,先执行async2后,发现有await关键字,于是让出线程,阻塞代码呢?

实践的结论是,从右向左的。先打印async2,后打印的script start

之所以提一嘴,是因为我经常看到这样的说法,「一旦遇到await就立刻让出线程,阻塞后面的代码」

这样的说法,会让我误以为,await后面那个函数, async2()也直接被阻塞呢。

3.await 等到之后,做了一件什么事情?

那么右侧表达式的结果,就是await要等的东西。

等到之后,对于await来说,分2个情况

  • 不是promise对象
  • 是promise对象

如果不是 promise , await会阻塞后面的代码,先执行async外面的同步代码,同步代码执行完,再回到async内部,把这个非promise的东西,作为 await表达式的结果

如果它等到的是一个 promise 对象,await 也会暂停async后面的代码,先执行async外面的同步代码,等着 Promise 对象 fulfilled,然后把 resolve 的参数作为 await 表达式的运算结果。

第2部分:画图一步步看清宏任务、微任务的执行过程

我们以开篇的经典面试题为例,分析这个例子中的宏任务和微任务。

        async function async1() {
            console.log( 'async1 start' )
            await async2()
            console.log( 'async1 end' )
        }
        async function async2() {
            console.log( 'async2' )
        }
        console.log( 'script start' )
        setTimeout( function () {
            console.log( 'setTimeout' )
        }, 0 )
        async1();
        new Promise( function ( resolve ) {
            console.log( 'promise1' )
            resolve();
        } ).then( function () {
            console.log( 'promise2' )
        } )
        console.log( 'script end' )

先分享一个我个人理解的宏任务和微任务的慨念,在我脑海中宏任务和为微任务如图所示

clipboard.png

也就是「宏任务」、「微任务」都是队列。

一段代码执行时,会先执行宏任务中的同步代码,

  • 如果执行中遇到setTimeout之类宏任务,那么就把这个setTimeout内部的函数推入「宏任务的队列」中,下一轮宏任务执行时调用。
  • 如果执行中遇到promise.then()之类的微任务,就会推入到「当前宏任务的微任务队列」中,在本轮宏任务的同步代码执行都完成后,依次执行所有的微任务1、2、3

下面就以面试题为例子,分析这段代码的执行顺序.

每次宏任务和微任务发生变化,我都会画一个图来表示他们的变化。

直接打印同步代码 console.log('script start')
首先是2个函数声明,虽然有async关键字,但不是调用我们就不看。然后首先是打印同步代码 console.log('script start')

clipboard.png

将setTimeout放入宏任务队列
默认<script></script>所包裹的代码,其实可以理解为是第一个宏任务,所以这里是宏任务2

clipboard.png

调用async1,打印 同步代码 console.log( 'async1 start' )
我们说过看到带有async关键字的函数,不用害怕,它的仅仅是把return值包装成了promise,其他并没有什么不同的地方。所以就很普通的打印 console.log( 'async1 start' )

clipboard.png

分析一下 await async2()
前文提过await,1.它先计算出右侧的结果,2.然后看到await后,中断async函数

- 先得到await右侧表达式的结果。执行async2(),打印同步代码console.log('async2'), 并且return Promise.resolve(undefined)
- await后,中断async函数,先执行async外的同步代码

目前就直接打印 console.log('async2')

clipboard.png

被阻塞后,要执行async之外的代码

执行new Promise(),Promise构造函数是直接调用的同步代码,所以 console.log( 'promise1' )

clipboard.png

代码运行到promise.then()
代码运行到promise.then(),发现这个是微任务,所以暂时不打印,只是推入当前宏任务的微任务队列中。

注意:这里只是把promise2推入微任务队列,并没有执行。微任务会在当前宏任务的同步代码执行完毕,才会依次执行

clipboard.png

打印同步代码 console.log( 'script end' )
没什么好说的。执行完这个同步代码后,「async外的代码」终于走了一遍

下面该回到 await 表达式那里,执行await Promise.resolve(undefined)了

clipboard.png

回到async内部,执行await Promise.resolve(undefined)

这部分可能不太好理解,我尽量表达我的想法。

对于 await Promise.resolve(undefined) 如何理解呢?

https://developer.mozilla.org...

根据 MDN 原话我们知道

如果一个 Promise 被传递给一个 await 操作符,await 将等待 Promise 正常处理完成并返回其处理结果。

在我们这个例子中,就是Promise.resolve(undefined)正常处理完成,并返回其处理结果。那么await async2()就算是执行结束了。

目前这个promise的状态是fulfilled,等其处理结果返回就可以执行await下面的代码了。

那何时能拿到处理结果呢?

回忆平时我们用promise,调用resolve后,何时能拿到处理结果?是不是需要在then的第一个参数里,才能拿到结果。

(调用resolve时,会把then的参数推入微任务队列,等主线程空闲时,再调用它)

所以这里的 await Promise.resolve() 就类似于

Promise.resolve(undefined).then((undefined) => {

})

把then的第一个回调参数 (undefined) => {} 推入微任务队列。

then执行完,才是await async2()执行结束。

await async2()执行结束,才能继续执行后面的代码

如图

clipboard.png

此时当前宏任务1都执行完了,要处理微任务队列里的代码。

微任务队列,先进先出的原则,

  • 执行微任务1,打印promise2
  • 执行微任务2,没什么内容..

但是微任务2执行后,await async2()语句结束,后面的代码不再被阻塞,所以打印

console.log( 'async1 end' )

宏任务1执行完成后,执行宏任务2

宏任务2的执行比较简单,就是打印

console.log('setTimeout')

补充在不同浏览器上的测试结果

谷歌浏览器,目前是版本是「版本 71.0.3578.80(正式版本) (64 位)」 Mac操作系统

clipboard.png

Safari浏览器的测试结果

clipboard.png

火狐浏览器的测试结果

clipboard.png

如果不理解可以留言,有错误的话也欢迎指正。

关于执行顺序

评论区有指出

  • Chrome72 dev版本的执行顺序是Promise2后打印,
  • 或者是babel编译过后的代码是promise2后打印。

我自己也实践了一下babel编译后的代码执行顺序的确是promise2后打印的..

原因是ESMA最新规范的有修改,然后这一点的详情,说实话我目前也不是很清楚,评论区有给出资料,可供参考讨论。

https://github.com/rhinel/blo...

你可能感兴趣的

59 条评论
黑将军 · 2018年12月03日

我这里补充另一种解释方式:(可参考文章https://segmentfault.com/a/11...

async await实质只是promise.then 的语法糖,虽然js引擎会对其进行优化(https://mathiasbynens.be/note...)。但不影响对事件循环执行顺序的理解。
文章开头的代码执行顺序可做如下解释:
1 async function async1() {
2 console.log( 'async1 start' )
3 await async2()
4 console.log( 'async1 end' )
5 }
6 async function async2() {
7 console.log( 'async2' )
8 }
9 console.log( 'script start' )
10 setTimeout( function () {
11 console.log( 'setTimeout' )
12 }, 0 )
13 async1();
14 new Promise( function ( resolve ) {
15 console.log( 'promise1' )
16 resolve();
17 } ).then( function () {
18 console.log( 'promise2' )
19 } )
20 console.log( 'script end' )

Js引擎解析这段代码,line 9 执行打印任务,打印 <script start> ,10-12将任务(我们命名为timeout_task)console.log( 'setTimeout' )添加进message queque队列,13行执行函数asyn1(实质时创建一个promise),promise的构造函数运行是在主任务队列中,所以打印 <async1 start> ,并执行async2函数,同样async2函数是promise的构造函数,立即执行打印 <async2> ,await是promise.then的语法糖,这里实质是async2().then(() => {asycn1.then(() => console.log(‘async1 end’))})。这里我们将其命名为task1。task1是promise的一个resolve状态的回调函数,被添加到job queque中。继续14行,新建promise,构造函数立即执行打印 <promise1>,并将打印promise2的任务(我们命名为task2)添加到job queque。然后执行到20行,打印 <script end>,至此主任务队列空,job queque中任务task1执行,asycn1.then(() => console.log(‘async1 end’),将打印 async1 end的任务(我们命名为task3)添加到job queue;然后执行task2,打印 <promise2>;然后执行task3,打印 <async1 end>。至此job queque为空,message que中还有一个timeout_task,执行打印 <setTimeout>。
以上描述文字中<>中内容是被console.log 出来的内容,打印顺序同描述顺序

+8 回复

就这样 · 2018年12月03日

async2 返回的微任务为什么会在promise2 之后呢 不懂求解

+1 回复

2

你问的这个问题也是我之前纠结的点,值得讨论哈。MDN有一句原话

如果一个 Promise 被传递给一个 await 操作符,await 将等待 Promise 正常处理完成并返回其处理结果。

在上面那个例子里,什么时候 promise 被传递给 await 操作符的呢?

我觉得是 async 外面的同步代码执行了一圈回来后,回到await async2() 这一行时,才把promise传递给await操作符的

所以微任务队列里,promise2是先进去的,await async2()这里的微任务是后进去的。

以上是我的理解。你可以看看其他人的解释
https://segmentfault.com/a/11...

每个人的博客说得都不一定准确,只能自己多思考了,尤其是这里,如果要准确的描述其内部过程,我觉得涉及到 await 内部实现了。所以我是从MDN中对 await 描述的角度,再自己实践,去猜测await的执行特点的

Ziwei 作者 · 2018年12月03日
0

@就这样 因为遇到await要把外面的都执行完

Vx_丶 · 2018年12月03日
0

@ziwei3749 如果async2里,手动写一个return promise对象,async function async2() {
console.log('async2')
return new Promise(res=>{

res(2)

}).then(data=>{console.log('async返回的promise结果:',data)})
},这个值就会先于promise2前面输出,不像画的那个图,undefined比promise2后入栈,是不是应该undefined比promise2先入栈才对??

timy · 2018年12月10日
Ziwei 作者 · 2018年12月05日

补充了一下在其他浏览器上的测试结果哈

+1 回复

rhinel · 2018年12月05日

可以看我之前写过的文章

https://github.com/rhinel/blo...

里面详细写了JS环境、堆栈、事件循环、Task和Job执行顺序。

回复

rhinel · 2018年12月05日

抱歉题主的测试一下有错误:
我自己分析和我的浏览器跑出来都是下面的:

script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout

回复

0

额,您是什么浏览器什么版本呢? 我这边用的Chrome最新版本版本 70.0.3538.110
我只知道node.js和浏览器的eventloop的实现机制不同,的确会导致顺序不同。

还没研究过浏览器之间的差异,感觉上谷歌最新版本可能会更加符合规范些,这个值得再讨论

Ziwei 作者 · 2018年12月05日
0

@ziwei3749 版本 72.0.3622.0(正式版本)dev (64 位)

rhinel · 2018年12月05日
0

@ziwei3749

分析上来看:
promise2 这then会进入微任务排队,应该排在 async1 end 后面。

具体是这里的问题。

rhinel · 2018年12月05日
micherwa · 2018年12月05日

对于知识点的应用,最终需要落到实际的项目中去实践。所以,我在react工程中的componentDidMount方法里执行完之后,发现 async1 end 在 promise2 之前打印了。

楼主的答案是在目前最新版的chrome71下执行的,而我在工程中执行所输出的结果,最终也会被babel编译为浏览器能解析的结果。那么,这是否可以说在未来 @rhinel的chrome72 dev 中,对这两者的顺序将做改进?

我一开始也认为 async1 end 应该在 promise2 之前。我觉得既然async/await的目的是让异步能像同步一样的书写,那么就可以认为 async1 end 是在主线程中的,所以当 script end 执行完之后,会先于 promise2 执行。

最后,如果在工程中执行的结果,和原生浏览器中执行的结果产生冲突的时候,我们是否应该以babel编译的结果为准呢?因为在日常的开发中,毕竟还是在工程中居多吧。

因为在这里有一点争议,所以想讨论一下。

ps:工程中的babel-loader版本为7.1.5。.babelrc的presets设置了stage-3。

回复

0

js规范方面将来会不会修改,我也不了解。如果是从实际项目考虑,感觉最好的选择是避免写这种代码。 一般并行请求或者串行请求都有更好的写法嘛不是

Ziwei 作者 · 2018年12月05日
0

规范有更新,babel是对的,71版chrome是错的
https://github.com/rhinel/blo...

rhinel · 2018年12月05日
0

额,大神,我水平有限呀,看不太懂这个issue,只能看出这是一个2016被关闭的issue,看不大懂内容..

总之就是 Chrome71以下版本 、 Safari 、 火狐浏览器 的顺序表现 是跟我文章测试的一模一样,

但是JS规范改了,Chrome72版本实现的是最新规范?

其实纠结的点,无非就是再次回到await 时,后面的代码会不会进入一个微任务嘛。

而这一点,完全是看规范怎么定的。

从语言标准角度,我觉得就没必要说对错了,规范怎么定咱就怎么用吧。

从实际开发角度,我觉得完全可以避免写这种代码。想串行、或者并行都有更好的写法,对吧?

Ziwei 作者 · 2018年12月05日
方旭 · 2018年12月07日

你好,请问这篇文章可以授权奇舞周刊转载嘛?会注明作者及出处。

回复

0

嗯 可以,注明出处就行

Ziwei 作者 · 2018年12月07日
yangal · 2018年12月07日

打印的那条 undefined 是啥意思呢

回复

0

额,可能我这个举例不是很恰当。文章里没说打印undefiend哈

我的意思是 async2这个函数没有写return 值,然后有async关键字的函数会把结果用Promise.resolve()包装,就相当于 return Promise.resolve(undefined)一样。

Ziwei 作者 · 2018年12月07日
1

控制台执行任何语句都认为是在一个匿名函数空间包裹下的,JS函数return; 和不写return都是默认返回undefined,所以会在控制台下输出undefined

rhinel · 2018年12月08日
yangal · 2018年12月07日

我在浏览器里试了一下 是
script start
async1 start
async2
promise1
script end
promise2
async1 end
undefined
setTimeout

其他的我倒是明白 但是不太明白undefined那条 然后看你们都把那条忽略不讲

回复

0

你是直接粘贴到在浏览器的控制台测试的吧?

那个是console.log( 'script end' )的返回值。 你在控制台试试console.log(1) 也会
1
undefined

Ziwei 作者 · 2018年12月07日
0

恩 是啊,这是为啥

yangal · 2018年12月07日
0

我自己查了一下 明白了

yangal · 2018年12月07日
yangal · 2018年12月07日

贴不了图 我用的chrome 69版本 在程序里写代码跑的时候 浏览器控制台打印的顺序
script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout
如果我直接在浏览器控制台输入的话
打印的顺序是:
script start
async1 start
async2
promise1
script end
promise2
async1 end
setTimeout

没有完全一样 这是咋回事呢

回复

0

额,我没遇到过你这个情况。首先排除浏览器版本问题。

你不都是用的同一个chrome 69嘛。

然后就没思路了...chrome bug了?

Ziwei 作者 · 2018年12月07日
0

你这个情况,我也摸不到头脑..感觉没什么思路。

Ziwei 作者 · 2018年12月07日
0

@ziwei3749 情况一肯定是被babel编译了,按照最新标准和chrome72版本来的,情况2是71版本以前的都是这样的结果,关于这个前面的回复咱们讨论过

rhinel · 2018年12月08日
Fundebug · 2018年12月11日

提醒一下,“先进选出”应该是"先进先出"

回复

0

谢谢,已改

Ziwei 作者 · 2018年12月11日
Jialiang_T · 2018年12月18日

我想补充一个测试样例:

async function test() {
    console.log('test start');
    await undefined;
    console.log('await 1');
    await new Promise(r => { 
        console.log('promise in async');
        r();
    });
    console.log('await 2');
    
}

test();
new Promise((r) => {
    console.log('promise');
    r();
})
.then(()=>{console.log(1)})
.then(()=>{console.log(2)})
.then(()=>{console.log(3)})
.then(()=>{console.log(4)});

在最新的chrome中输出顺序如下:

test start
promise
await 1
promise in async
1
2
3
await 2
4

看了你的文章,我搞不太懂为什么 'await 2' 会在 3 之后输出,貌似在 async 函数中 await new Promise 这一句添加了2次微任务

回复

0

说实话,这个问题,最近我也发现了,我觉得仅仅只是宏任务、微任务的知识,没法解释清这个顺序,有时候这个顺序还跟运行环境相关,也许还有其他因素。

在实践方面,我觉得就是避免写这种代码吧。并行、串行都有更易读、简洁的实践。

类似的例子还有,执行顺序是 1 4 2 5 3 6,这个例子里的顺序我也没法解释..

       new Promise( ( resolve, reject ) => {
                console.log( "promise1" )
                resolve()
            } )
            .then( () => {
                console.log( 1 )
            } )
            .then( () => {
                console.log( 2 )
            } )
            .then( () => {
                console.log( 3 )
            } )

        new Promise( ( resolve, reject ) => {
                console.log( "promise2" )
                resolve()
            } )
            .then( () => {
                console.log( 4 )
            } )
            .then( () => {
                console.log( 5 )
            } )
            .then( () => {
                console.log( 6 )
            } )
        // 1 4 2 5 3 6
Ziwei 作者 · 2018年12月18日
0

其实,题主举的这个例子还是很好解释的……下面说说我的理解:

一. 不用多说,先执行同步任务,也就是第一个Promise构造器里的console,控制台:

promise1

二. 第一个Promiseconsole.log( "promise1" )执行完后,执行resolve(),此时一个微任务被推入微任务队列,该微任务需要执行:console.log(1)

三. 继续执行第二个Promise构造器中的同步代码,执行console.log( "promise2" ),控制台:

promise1
promise2

四. 执行第二个Promise构造器中的resolve(),此时一个微任务被推入微任务队列,该微任务需要执行:console.log(4)。【现在,微任务队列中有2个任务,也就是log(1)log(4)

五. 同步任务执行完毕,要开始执行微任务队列中的任务了,执行console.log(1),控制台:

promise1
promise2
1

六. then方法返回一个Promise,第五步中的回调函数返回undefined,那么then返回的Promise将会成为接受状态,并且将返回的值作为接受状态的回调函数的参数值,相当于又注册了一个微任务,微任务回调为console.log(2),【故当前的微任务队列为:log(4)log(2)

七. 执行微任务console.log(4), 控制台:

promise1
promise2
1
4

八. 此时同第六步,注册一个微任务,回调为:console.log(5),【故当前的微任务队列为:log(2)log(5)

九. 重复上述的5~8,故最后的控制台输出结果为:

promise1
promise2
1
4
2
5
3
6

问题的关键在于连续的几个then()回调,并不是连续的创建了一系列的微任务并推入微任务队列,因为then()的返回值必然是一个Promise,而后续的then()是上一步then()返回的Promise的回调

Jialiang_T · 2018年12月18日
0

@Jialiang_T 嗯,是,我觉得你说的有道理... 那你上面的问题现在解决了吗

Ziwei 作者 · 2018年12月19日
xianshenglu · 1月13日

https://github.com/xianshengl... 你可以看看这个,来解释你的疑惑,还有 https://segmentfault.com/q/10... 这个也可以看下

回复

0

好的👌谢谢

Ziwei 作者 · 1月14日
陈韵同 · 3月22日

我觉得图示上有个问题,作者似乎没有区分开同步任务和宏任务,同步执行的代码是不需要进入宏任务队列的。

回复

xuyh · 4月11日

执行顺序:
script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout

回复

载入中...