前言
面试过程中，被问到一个题，因为忽略了await出现后先执行async外面的同步代码而出错，特此记录。题目详情：
async function async1(){
console.log('1');
await async2();
console.log('2');
}
async function async2(){
console.log('3');
}
console.log('4')
setTimeout(function(){
console.log('5')
}, 0);
async1();
new Promise(function(resolve){
console.log('6');
resolve();
}).then(function(){
console.log('7')
});
console.log('8')
下面详细说一下Async/Await关键字，在这之前需要了解js执行机制及其Event Loop，详情请移步【JavaScript】JS运行机制 Event Loop。
Async/Await
Async/Await是提出其实是为了解决JS异步编程的问题。在这之前，ES2015提出了Promise方案，通过链式调用让回调函数扁平化，减少了回调嵌套；ES6标准引入generator，其配合执行器co函数也可以解决回调函数嵌套问题。
为了更进一步简化异步编程语法，ES2017提出Async/Await语法糖，其本质就是包装了Generator生成器。Async/Await示例：
async function main() {
let v1 = await new Promise(resolve => {
setTimeout(() => {
resolve('async excute 1')
}, 1000);
})
console.log(v1)
let v2 = await new Promise(resolve => {
setTimeout(() => {
resolve('async excute 2')
}, 1000);
})
console.log(v2)
}
// 执行
main()
正常来说，Async/Await关键字是需要配合使用，且带async关键字的函数返回值必是promise对象。下面看一下这两个关键字后返回promise对象与否的情况：
Async:
- 如果
async方法中没有await关键字，可以认为是一个普通的方法。async function main() { console.log('await') } console.log('next') main() // 输出：await, next - 如果
async函数返回非Promise对象，那么返回值会自动用Promise.resolve()包装。async function fn() { return 'foo' // 如果没有return，相当于return undefined } fn().then(data => { console.log(data) }) // 相当于 function fn1() { return new Promise(resolve => { resolve('foo') }) }
Await
- 如果
await关键字后面是一个Promise对象，那么相当于在Promise对象中注入了then处理方法接受异步操作返回值，开启一个微任务。async function main() { const v =await new Promise(resolve => { resolve('await') }) console.log(v) } main() console.log('next') // 输出: next, await - 如果
await关键字后面的Promise对象中没有执行resolve方法，就会导致Promise一直处在pending状态，无法执行then方法，因此await后面的代码不会执行。async function main() { const v = await new Promise(resolve => { }) console.log(v) // console.log(v)不会执行 } main() console.log('next') // 输出: next - 如果await关键字后面是一个非Promise的普通数据，那么其相当于执行Promise.resolve()。
async function main() { const v = await 'await' console.log(v) } main() console.log('next') // 输出: next, await // 相当于 async function main() { const v = await Promise.resolve('await') console.log(v) }
题解：
在理解了上面的概念后，我们回来再看那道面试题：
async function async1(){
console.log('1');
await async2();
console.log('2');
}
async function async2(){
console.log('3');
}
console.log('4')
setTimeout(function(){
console.log('5')
}, 0);
async1();
new Promise(function(resolve){
console.log('6');
resolve();
}).then(function(){
console.log('7')
});
console.log('8')
分析过程：
| 执行顺序 | 同步任务 | 微任务 | 宏任务 |
|---|---|---|---|
| async function async1() {
console.log( ‘1’ ) await async2() console.log( ‘2’ ) } |
|||
| async function async2() {
console.log( ‘3’ ) } |
|||
| console.log( ‘4’ ) | 1. 同步任务，打印4 | ||
| setTimeout( function () {
console.log( ‘5’ ) }, 0 ) |
2. 遇到定时器，放入宏任务队列，记为T1，此时宏任务队列（T1） | 8. 执行宏任务，打印5 | |
| async1(); | 3. 遇到async1，开始执行，打印1； 遇到await async2开始执行async2，打印3; 因async2无return返回值默认为undefined，故返回值是Promise.resolve(undefined)，则此时开启微任务，w1 |
6. 执行w1，打印2 | |
| new Promise( function ( resolve ) {
console.log( ‘6’ ) resolve(); } ).then( function () { console.log( ‘7’ ) } ) |
4. 执行promise的resolve，打印6，并把then加入微任务队列，记为w2 | 7. 执行w2，打印7 | |
| console.log( ‘8’ ) | 5. 打印8 |
打印结果：4，1，3，6，8，2，7，5