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

     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. 复旦高等代数 II(17级)每周一题

    本学期将继续进行高等代数每周一题的活动.计划从第一教学周开始,到第十六教学周为止(根据法定节假日安排,中间个别周会适当地停止),每周的周末将公布1道思考题(共16道),供大家思考和解答.每周一题通过“ ...

  2. MyBatis进阶(一)

    MyBatis参数传递 1. MyBatis单参数传递 单参数传递不做特殊处理,直接取出参数值赋给xml文件,如#{id} 2. MyBatis多参数传递 多参数传递默认使用{arg1, arg0, ...

  3. Learning-Python【13】:迭代器和生成器

    一.什么是迭代器 迭代指的是一个重复的过程,每一次重复都是基于上一次的结果而来的 # 这里的循环也是一个迭代,每次基于上一次的结果而取值 li = 'hello' i = 0 while i < ...

  4. Learning-Python【32】:进程理论基础

    什么是进程 进程就是一个程序在一个数据集上的一次动态执行过程.是用来描述程序执行过程的虚拟概念.进程的概念起源于操作系统,进程是操作系统最核心的概念,操作系统其它所有的概念都是围绕进程来的.进程一般由 ...

  5. CSS基础【1】:体验CSS

    CSS起源 web的衰落:在 web 早期(1990-1993),html是一个很局限的语言.几乎完全由用于描述段落,超链接,列表和标题的结构化元素组成.随着万维网的出现(用户交互体验的加强),对 h ...

  6. VS工作目录,输出目录

    C++项目,解决方案总文件夹下就只包含解决方案配置文件sln和一个项目总文件夹和一个Debug文件夹以及一个Release文件夹(共四个东东,其中Debug和Release文件夹中存放最终生成的结果e ...

  7. 本地构建:Gulp

    Gulp中文网:https://www.gulpjs.com.cn/ Gulp英文网:https://gulpjs.com/ Gulp:工作流程自动化+强化 (一)安装初始化 (二)基础API及插件 ...

  8. 如何在nginx容器中使用ping、nslookup、ip、curl 等工具?

    Nginx镜像太精简了,启动一个容器进行测试时,常用的网络工具都没有,可以使用下面的命令进行安装.也可以直接起一个busybox容器进行测试. apt update #ping apt install ...

  9. Yahoo Programming Contest 2019 F - Pass

    F - Pass 思路: dp[i][j] 表示到第 i 个球为止放了 j 个蓝球的方案数 第 i 个球来自的位置的最右边是min(i, n) 转移方程看代码 代码: #pragma GCC opti ...

  10. 2018 German Collegiate Programming Contest (GCPC 18)

    2018 German Collegiate Programming Contest (GCPC 18) Attack on Alpha-Zet 建树,求lca 代码: #include <al ...