async/await 和promise.then 的执行时机

Question

例1
function  GenFunc () {
  new Promise(function(resolve) {
        resolve()
    }).then(function() {
        console.log('1')
    })
  console.log('2')
}
GenFunc()
// 执行结果
// 2
// 1
例2
async function  GenFunc () {
  new Promise(function(resolve) {
        resolve()
    }).then(function() {
        console.log('1')
    })
    await 'string';
    console.log('2')
}
GenFunc()
// 执行结果
// 1
// 2

请问为什么await会改变执行顺序。Promise.then属于microtasks。同步的代码没执行完是不会进入microtasks的。所以请问两段代码结果不一致的原因是什么

Answer 1

既然题主自己提到了microtask，我就假设题主已经知道例1是怎么回事了

async内的await会把之后的代码放入新的microtask，即使等待的东西实际上是同步的。

---

详细解析：

(async function GenFunc() {
  new Promise(function constructPromise(resolve) { // 1. Promise构造器，同步执行constructPromise
    resolve()                                      // 2. resolve，将promiseCallback放入microtask队列位置1
  }).then(function promiseCallback() {
    console.log('1')                               // 6. microtask队列位置1
  })
  await 'string'                                   // 3. await，将之后的所有代码放入microtask队列位置2
  console.log('2')                                 // 7. microtask队列位置2
})()                                               // 4. async call return，返回Promise<pending>
console.log('3')                                   // 5. 执行剩余的同步代码