async / await

async / await

使用 async / await, 搭配 promise, 可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性

• 异步回调callback hell
• promise then catch链式调用，但也是基于回调函数
• async/await是同步语法，彻底消灭回调函数

async / await和promise的关系

• async / await是消灭异步回调的终极武器
• 但和promise互不相斥，反而，两者相辅相成
• 执行async函数，返回的是promise对象
• await相当于promise的then
• try…catch可捕获异常，代替了promise的catch

异步的本质

• async / await是消灭异步回调的终极武器
• JS还是单线程，还得是有异步，还得是基于event loop
• async / await只是一个语法糖

例子1
结果：

例子2

for…of

结果：一秒后1 4 9 一起显示

结果：1 4 9 隔一秒显示

event loop（事件循环/事件轮询）

JS如何执行？

event loop过程

总结：

event loop和DOM事件

宏任务macroTask和微任务microTask

event loop和DOM渲染

回顾event loop过程（增加DOM渲染时机）

从event loop解释，为何微任务执行更早

场景题

promise、then、catch的连接

async/await语法

例1

结果：

例2

结果：

例3

结果：

总结

1. 同步代码执行完毕（event loop – call stack被清空）
2. 执行微任务
3. 尝试触发DOM渲染
4. 触发event loop执行宏任务

代码执行的优先级:

同步代码 > process.nextTick > Promise（微任务）> setTimeout(fn)、setInterval(fn)（宏任务）> setImmediate（宏任务）> setTimeout(fn, time)、setInterval(fn, time)，其中time>0

面试回答

JavaScript 执行机制？
首先js 是单线程运行的，在代码执行的时候，通过将不同函数的执行上下文压入执行栈中来保证代码的有序执行。
在执行同步代码的时候，如果遇到了异步事件，js 引擎并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务
当同步事件执行完毕后，再将异步事件对应的回调加入到与当前执行栈中不同的另一个任务队列中等待执行。
任务队列可以分为宏任务对列和微任务对列，当当前执行栈中的事件执行完毕后，js 引擎首先会判断微任务对列中是否有任务可以执行，如果有就将微任务队首的事件压入栈中执行。
当微任务对列中的任务都执行完成后再去判断宏任务对列中的任务。

面试遇到的问题总结

1、同步和异步的区别是什么？分别举一个同步和异步的例子
同步会阻塞代码执行，而异步不会。alert是同步，setTimeout是异步

2、为何需要异步呢？
如果第一个示例中间步骤是一个 ajax 请求，现在网络比较慢，请求需要5秒钟。如果是同步，这5秒钟页面就卡死在这里啥也干不了了。

最后，前端 JS 脚本用到异步的场景主要有两个：

定时 setTimeout setInverval
网络请求，如 ajax 加载
事件绑定

3、写出下图执行顺序

执行顺序是2431

在 new Promise() 中传入的回调函数是 立即执行 的，但是它的 then() 方法是在 执行栈之后，任务队列之前 执行的，
.then是回调函数，链式回调，会被放在挂起，等待执行栈的内容执行完后（输出4）再回调（输出3），最后执行异步的1

理解 JavaScript 的 async/await
异步Promise及Async/Await可能最完整入门攻略
大白话讲解JavaScript 执行机制，一看就懂