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

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。

那么若是不具有这些知识呢，推荐几篇我以为讲得比较清楚的文章

segmentfault.com/a/119000001… async

segmentfault.com/a/119000000… await最清楚的文章

es6.ruanyifeng.com/#docs/promi… promise 的应该较少啦。

主要内容 第1部分：对于async await的理解 我推荐的那篇文章，对 async/await 讲得更详细。不过我但愿本身能更加精炼的帮你理解它们。

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

async 作一件什么事情？

await 在等什么？

await 等到以后，作了一件什么事情？

补充: 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')
复制代码

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

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

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

若是执行中遇到 setTimeout 之类宏任务，那么就把这个 setTimeout 内部的函数推入「宏任务的队列」中，下一轮宏任务执行时调用。

若是执行中遇到 promise.then() 之类的微任务，就会推入到「当前宏任务的微任务队列」中，在本轮宏任务的同步代码执行都完成后，依次执行全部的微任务一、二、3。

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

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

直接打印同步代码 console.log('script start')

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

将setTimeout放入宏任务队列

默认 所包裹的代码，其实能够理解为是第一个宏任务，因此这里是宏任务2：

调用async1，打印 同步代码 console.log('async1 start')

咱们说过看到带有async关键字的函数，不用惧怕，它的仅仅是把return值包装成了promise，其余并无什么不一样的地方。因此就很普通的打印 console.log('async1 start')。

分析一下 awaitasync2()

前文提过await，它先计算出右侧的结果，而后看到await后，中断async函数：

先获得await右侧表达式的结果。执行 async2()，打印同步代码 console.log('async2')，而且return Promise.resolve(undefined)。

await后，中断async函数，先执行async外的同步代码。

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

被阻塞后，要执行async以外的代码。

执行 newPromise()

Promise构造函数是直接调用的同步代码，因此 console.log('promise1')：

代码运行到 promise.then()

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

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

打印同步代码 console.log('script end')

没什么好说的。执行完这个同步代码后，「async外的代码」终于走了一遍

下面该回到 await 表达式那里，执行 awaitPromise.resolve(undefined) 了。

回到async内部，执行 awaitPromise.resolve(undefined)

这部分可能不太好理解，我尽可能表达个人想法。

对于 awaitPromise.resolve(undefined) 如何理解呢？

developer.mozilla.org/zh-CN/docs/…

根据 MDN 原话咱们知道：若是一个 Promise 被传递给一个 await 操做符，await 将等待 Promise 正常处理完成并返回其处理结果。

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

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

那什么时候能拿处处理结果呢？

回忆平时咱们用promise，调用resolve后，什么时候能拿处处理结果？是否是须要在then的第一个参数里，才能拿到结果。

（调用resolve时，会把then的参数推入微任务队列，等主线程空闲时，再调用它）。

因此这里的 awaitPromise.resolve() 就相似于：

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



})
复制代码

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

then执行完，才是 awaitasync2() 执行结束。

awaitasync2() 执行结束，才能继续执行后面的代码，如图：

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

微任务队列，先进选出的原则：

执行微任务1，打印promise2

执行微任务2，没什么内容..

可是微任务2执行后， awaitasync2() 语句结束，后面的代码再也不被阻塞，因此打印：

console.log( 'async1 end')

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

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

console.log('setTimeout')