JavaScript 异步：一道不错的面试题

[ifyour]

请看题：

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');

一、await 后面的表达式

1. 非 Promise 实例。
   如果不是 promise , await 会阻塞后面的代码，先执行 async 外面的同步代码，同步代码执行完，再回到 async 内部，把这个非 promise 的东西，作为 await 表达式的结果。

2. Promise 实例。
   如果它等到的是一个 promise 对象，await 也会暂停 async 后面的代码，先执行 async 外面的同步代码，等着 Promise 对象 fulfilled，然后把 resolve 的参数作为 await 表达式的运算结果。

二、宏任务/微任务队列

1. 第一步
   

2. 第二步
   

3. 第三步
   

4. 第四步
   

5. 第五步
   

6. 第六步
   

7. 第七步
   

8. 第八步
   

三、答案

script start 
async1 start 
async2 
promise1 
script end 
promise2 
async1 end 
setTimeout 

浏览器控制台输出

四、相关文章

• JavaScript : Event Loop
• 8 张图让你一步步看清 async/await 和 promise 的执行顺序
• 饿了么前端：Event Loop 这个循环你晓得么？(附GIF详解)
• What is the JavaScript event loop?