首先是一道今日头条的面试题:(听说是今日头条的并且已经烂大街了)

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

这个题我认为的顺序和浏览器的顺序一开始并不一样,让我一度以为浏览器出了问题。

首先需要了解promise,不然后面就很难理解下去。参见:http://es6.ruanyifeng.com/#docs/promise

async是什么?

 简单来讲如果一个函数前面带了async那么,函数的返回值必定是一个promise的对象。如果返回值不是promise对象,会自动的去包装为一个promise对象。

await是什么?

 await可以算是async wait简写。等待async执行结果。

回到代码中,显而易见首先打印的内容是‘script start’,不需要解释。

然后就是setTimeout,虽然时间是0但是只有在这一轮事件循环的底部或者是事件队列为空才会立即执行,很明显既不是底部,事件队列也还未执行完成。

下一个执行到async1();

async1中首先打印‘async1 start’,然后遇到await,await会阻塞后面的代码,先执行async外部的代码,所以会接着打印‘async2’;

之前的await中断了当前async的执行,所以下一个执行的就是promise,promise是直接调用同步代码,所以接着就是‘promise1’;

因为会优先执行同步代码,所以接下来就是打印‘script end’;

执行完毕回到promise接着执行then打印‘promise2’,之后再次回到前面继续执行resolve,但是因为参数为空,所以打印‘undefined’;(promise执行顺序,具体参见:http://es6.ruanyifeng.com/#docs/promise)

这个时候await async2()执行结束,继续async1后面的代码,打印‘async1 end’;

至此所以的事件队列执行结束

前面说了,事件队列为空才会执行setTimeout

所以正确的顺序为:

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

 有错误的话欢迎指正。 

初窥async,await的更多相关文章

  1. Asycn/Await 异步编程初窥(二)

    经过总过4天的学习和实践,做完了 WinForm 下 .Net 4.5 的基本异步应用,实现了一个 Http 协议下载的测试程序,为以后使用 .Net 4.5 积累知识和经验.这个小程序完成这样几个作 ...

  2. Asycn/Await 异步编程初窥

    经过两天密集型的学习,翻阅了大量 webpages ,点击了不少重点 blogs,总算基本了解了一些 async/await 搭配使用的入门技巧,总结一下 1. async/await 应该只是语法上 ...

  3. ASP.NET 中的 Async/Await 简介

    本文转载自MSDN 作者:Stephen Cleary 原文地址:https://msdn.microsoft.com/en-us/magazine/dn802603.aspx 大多数有关 async ...

  4. ASP.NET 上的 Async/Await 简介

    原文链接 大多数有关 async/await 的在线资源假定您正在开发客户端应用程序,但在服务器上有 async 的位置吗?可以非常肯定地回答“有”.本文是对 ASP.NET 上异步请求的概念性概述, ...

  5. 仿async/await(一)and Gulp:新一代前端构建利器

    NET 4.5的async/await真是个神奇的东西,巧妙异常以致我不禁对其实现充满好奇,但一直难以窥探其门径.不意间读了此篇强文<Asynchronous Programming in C# ...

  6. 学习迭代器实现C#异步编程——仿async/await(一)

    .NET 4.5的async/await真是个神奇的东西,巧妙异常以致我不禁对其实现充满好奇,但一直难以窥探其门径.不意间读了此篇强文<Asynchronous Programming in C ...

  7. 聊聊多线程那一些事儿 之 五 async.await深度剖析

     hello task,咱们又见面啦!!是不是觉得很熟读的开场白,哈哈你哟这感觉那就对了,说明你已经阅读过了我总结的前面4篇关于task的文章,谢谢支持!感觉不熟悉的也没有关系,在文章末尾我会列出前四 ...

  8. async & await 的前世今生(Updated)

    async 和 await 出现在C# 5.0之后,给并行编程带来了不少的方便,特别是当在MVC中的Action也变成async之后,有点开始什么都是async的味道了.但是这也给我们编程埋下了一些隐 ...

  9. [.NET] 利用 async & await 的异步编程

    利用 async & await 的异步编程 [博主]反骨仔 [出处]http://www.cnblogs.com/liqingwen/p/5922573.html  目录 异步编程的简介 异 ...

随机推荐

  1. day03变量的命名规范,常量,输出:自带换行,输入,注释,数据类型,运算符,常用字符大小关系

    复习 ''' 1.语言的分类 -- 机器语言:直接编写0,1指令,直接能被硬件执行 -- 汇编语言:编写助记符(与指令的对应关系),找到对应的指令直接交给硬件执行 -- 高级语言:编写人能识别的字符, ...

  2. 多台linux主机间免密码登录

    即在一台主机上登录另一台主机. 有2台linux主机A.B.A输入命令ssh B的ip地址以连接B,发现需要输入B的登录密码,怎样不需要输入密码呢? 步骤1: 在主机A中,输入ssh-keygen - ...

  3. 论文阅读:Deep Attentive Tracking via Reciprocative Learning

    Deep Attentive Tracking via Reciprocative Learning 2018-11-14 13:30:36 Paper: https://arxiv.org/abs/ ...

  4. js 可以表示的最大值

    , ); ; ; for (var i = START; i <= END; i++) { count++; } console.log(count); // A. 0 // B. 100 // ...

  5. Axure 页面内多组内容切换的实现 + 利用一个内联框架实现百度地图访问

    Axure  页面内多组内容切换的实现,场景:点击某个元件的时候,会显示响应的页面 操作:将显示的页面设置为动态面板,如图所示应该设置动态面板的状态为三个状态,分别为点击qq账号.手机账号.邮箱账号时 ...

  6. Web版记账本开发记录(四)

    今天已经是是开发软件的第四天了,今天遇到了一些简单的小问题,虽然简单,但是自己仍旧不具备修改的能力, 自己尝试了各种办法仍旧没有修改成功,在收入表就状况百出,错误不断. 我决定明天还是静下心来好好地学 ...

  7. Linux进程间通信机制

    Linux支持管道.信号.unix system V三种IPC(Inter-Process-Communication)机制.以下分别对三种机制加以简单介绍. 一.信号机制: 信号又称作软中断,用来通 ...

  8. ceph Luminous版手动安装零散记录

    1.安装必要的依赖包,关防火墙,向/etc/hosts内添加域名等 2.安装ceph 配置yum源 (如果嫌慢,可以配置cachedir=/home/yum/$basearch/$releasever ...

  9. hibernate环境搭建及操作

    一.导入jar包.1.hibernate的jar包2.jdbc的jar包 二.配置Hibernate.建立hibernate.cfg.xml mysql配置如下: <!DOCTYPE hiber ...

  10. 【转载】Spring Cloud全家桶主要组件及简要介绍

    https://blog.csdn.net/xlgen157387/article/details/77773908