杭州web前端培训
达内杭州文教中心

13732203138

热门课程

带前端新手看懂async和await的执行顺序

  • 时间:2019-01-04 14:24
  • 发布:转载
  • 来源:网络

带前端新手看懂async和await的执行顺序,先测一下你需不需要看吧。

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


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


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


  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' )

注:因为是一道前端面试题,所以答案是以浏览器的eventloop机制为准的,在node平台上运行会有差异。

  1.     script start

  2.     async1 start

  3.     async2

  4.     promise1

  5.     script end

  6.     promise2

  7.     async1 end

  8.     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 关键字函数和普通函数的返回值的区别:


  1. async function fn1(){

  2.    return 123

  3. }

  4. function fn2(){

  5.    return 123

  6. }

  7. console.log(fn1())

  8. console.log(fn2())

  1. Promise {<resolved>: 123}

  2. 123


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


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


  • 在语义上要理解,async表示函数内部有异步操作

  • 另外注意,一般 await 关键字要在 async 关键字函数的内部,await 写在外面会报错。


2、await 在等什么?


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


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


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


  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. async1()

  10. 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部分:画图一步步看清宏任务、微任务的执行过程


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


  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' )


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

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

  • 如果执行中遇到 promise.then() 之类的微任务,就会推入到「当前宏任务的微任务队列」中,在本轮宏任务的同步代码执行都完成后,依次执行所有的微任务1、2、3。

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


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


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


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

将setTimeout放入宏任务队列


默认 <script></script> 所包裹的代码,其实可以理解为是第一个宏任务,所以这里是宏任务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外的同步代码。

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


执行 newPromise()


代码运行到 promise.then()


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


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


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


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


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


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


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

根据 MDN 原话我们知道:如果一个 Promise 被传递给一个 await 操作符,await 将等待 Promise 正常处理完成并返回其处理结果。


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


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

预约申请免费试听课

怕钱不够?就业挣钱后再付学费!    怕学不会?从入学起,达内定制课程!     担心就业?达内多家实践企业供你挑选!

上一篇:web前端之CSS中的尺寸单位汇总
下一篇:没有下一篇了

web前端收:JavaScript Math(算数) 对象教程

web前端之CSS派生选择器解析

Html5页面业务逻辑的6个基本步骤

从入门到“圣经”级前端开发书本强烈推荐

选择城市和中心
贵州省

广西省

海南省