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

     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. nginx和tomcat的优化

    测试脚本(服务器414报错)#!/bin/bashurl=http://192.168.4.5/for i in {1..5000}do url=${url}v$i=idoneecho $url #a ...

  2. EJB到底是什么?

    EJB到底是什么?   1. 我们不禁要问,什么是"服务集群"?什么是"企业级开发"? 既然说了EJB 是为了"服务集群"和"企业 ...

  3. vue 文件目录结构详解

    vue 文件目录结构详解 本篇文章主要介绍了vue 文件目录结构详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 项目简介 基于 vue.js 的前端开发环境,用于前后 ...

  4. FFT 快速傅里叶变换 学习笔记

    FFT 快速傅里叶变换 前言 lmc,ikka,attack等众多大佬都没教会的我终于要自己填坑了. 又是机房里最后一个学fft的人 早背过圆周率50位填坑了 用处 多项式乘法 卷积 \(g(x)=a ...

  5. mysql utf8mb4 设置

    [mysqld]collation-server=utf8mb4_general_ciinit-connect='SET NAMES utf8mb4'character-set-server=utf8 ...

  6. 【NET Core】 缓存 MemoryCache 和 Redis

    缓存接口 ICacheService using System; using System.Collections.Generic; using System.Threading.Tasks; nam ...

  7. 力扣(LeetCode)482. 密钥格式化

    给定一个密钥字符串S,只包含字母,数字以及 '-'(破折号).N 个 '-' 将字符串分成了 N+1 组.给定一个数字 K,重新格式化字符串,除了第一个分组以外,每个分组要包含 K 个字##符,第一个 ...

  8. (转)浏览器对象window,history,location,navigator,screen

    1.window对象:当前的浏览器窗口 window对象是BOM的核心,window对象指当前的浏览器窗口 所有JavaScript全局对象.函数以及变量均自动成为window对象的成员 全局变量是w ...

  9. C#---装箱、拆箱的一个案例

    using System; namespace ConsoleApplication1 { interface IInterface { void Add(int num); } struct Tes ...

  10. SASS 简单实用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...