await执行时机问题?

Question

console.log('start');

setTimeout(function() {
    console.log('timeout');
}, 0);

Promise.resolve().then(function() {
    console.log('promisel');
}).then(function() {
    console.log('promise2');
}).then(() => console.log(`promise3`))

async function asyncFunc() {
     await asyncSubFunc();
     Promise.resolve().then(x => {
         console.log('async end');
     })
}

async function asyncSubFunc() {
    console.log('async sub');
    return Promise.resolve().then(() => {
        console.log('async sub promise');
    });
}
asyncFunc();

console.log('end');

理想的预期输出:
start
async sub
end
promisel
async sub promise
async end
promise2
promise3
timeout

实际浏览器控制台输出为：
start
async sub
end
promisel
async sub promise
promise2
promise3
async end
timeout

问题1：await后的代码被执行完成后，为什么没有继续往下，而是继续执行微任务队列中的微任务?
问题2：await后(下一行)的代码会被放在微任务队列中执行，具体的执行时机是？

Answer 1

你这不存在固定顺序，你多执行几遍，应该会输出结果都不一样。

你这段代码，相当于有3个异步，相当于3个各自执行，谁先谁后不固定。

Answer 2

async function 的返回一定是一个 promise 。这个 promise 会使用函数的返回语句中的值去 resolve。

所以在这里，asyncSubFunc 的 return 后面是一个 promise (记作 promise_return)，asyncSubFunc 返回的是另一个 promise (记作 promise_async)，这是两个不同的 promise 。并且 promise_return 会用于 resolve promise_async，大致相当于 promise_return 会被添加一个 then 任务，在其中会 resolve promise_async。

await promise_async (promise_async 是 asyncSubFunc 的返回值)，大致相当于给 promis_asnyc 增加了一个 then 任务，在其中执行函数剩余部分。

所以从 promise_return resolve 开始（也就打出 "async sub promise" 之后），到 await 语句之后的代码被执行，需要经历两个 then 任务。第一个是 promise_return 的 then 任务，会 resolve promise_async ；第二个是 promise_async 的 then 任务，会执行函数的后续部分。then 任务都是异步的，要等到 promise resolve 之后才会被加入微任务队列，于是，就可以看到其中插入了 promise2 与 promise3 。