async await面试题_页面还在加载接口,但是把他最小化啦,接口执行完执行settimeout(async () => {

首先看下面这段代码。这是之前字节跳动的面试题。

<script>
      setTimeout(() => {
        console.log("setTimeout");
      });
      async function async1() {
        console.log("async1 start");
        await async2();
        console.log("async1 end");
      }
      async function async2() {
        console.log("async2");
      }
      console.log("script start");
      async1();
      console.log("script end");
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

打印的结果是：
script start
async1 start
async2
script end
async1 end
setTimeout

注意这里setTimeout 是宏观任务，async await是微观任务，还有promise里面的resolve（），reject()也是微观任务。微观任务的执行优先于宏观任务。

所以这道题最后打印setTimeout
最难理解的是下面这段代码

      async function async1() {
        console.log("async1 start");
        await async2();// 这是异步，执行完之后不会打印‘async1 end’
        console.log("async1 end");
      }
      
1
2
3
4
5
6

打印完‘script end’再回来执行这段代码。
有考虑为什么这是异步的任务。要聊到Generator异步方案。