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

     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. Bugku-CTF之点击一百万次

    Day16 点击一百万次 http://123.206.87.240:9001/test/ hints:JavaScript  

  2. 为虚拟机配置固定ip地址

    vim /etc/sysconfig/network-scripts/ifcfg-eth0 修改BOOTPROTO为static 新增IPADDR即可 如下图所示

  3. cocos2d-js 小知识

    由于自己是小白,决定把零碎的cocos2d-js知识记下来. 1. 列表容器listView,去掉滚动条  _listView.setScrollBarEnabled(false); 2. escap ...

  4. angular --- s3core移动端项目(三)

    angular.module('myApp') .directive('listActive',functon(){ return { restrict:'A', scope:{ listActive ...

  5. ES6标准之基础

    let和const命令 ES6新增let命令,用于声明变量,是块级作用域. let声明的变量不会像var声明的变量发生“变量提升”现象,所以,变量一定要在声明后使用,不然就会报错. 暂时性死区:只要块 ...

  6. postman(五):在不同接口之间传递数据

    为了更灵活地构造请求以及处理响应数据,postman提供了Pre-request-Script和Tests,在这两个标签中可以编写js代码辅助测试.之前学习了在发送请求的Tests标签如何添加断言以及 ...

  7. spring cloud(一)带你进入分布式

    spring cloud是近年来比较火的热门话题,很多大型公司也渐渐转型使用spring cloud来完善各种开发模式,我认为主要是由spring团队开发由来,致使会有那么多的使用者,在java的领域 ...

  8. mybat使用注解的方式如@Select写sql

    package com.polymer.app.mapper; import org.apache.ibatis.annotations.Mapper; import org.apache.ibati ...

  9. xlwt 写sheet xls 文件

    import xlwtworkbook = xlwt.Workbook()#创建bookworksheet = workbook.add_sheet('My Sheet') #添加sheet#背景色的 ...

  10. centos7安装doxygen

    编译 编译过程参考官网:https://www.stack.nl/~dimitri/doxygen/download.html 编译过程: git clone https://github.com/d ...