await右值和async返回值

• async函数在抛出返回值时，会根据返回值类型开启不同数目的微任务

  • return结果值：非thenable、非promise（不等待）

  • return结果值：thenable（等待 1个then的时间）

  • return结果值：promise（等待 2个then的时间）

• await右值类型区别

  • 接非 thenable 类型，会立即向微任务队列添加一个微任务then，但不需等待

  • 接 thenable 类型，需要等待一个 then 的时间之后执行

  • 接Promise类型(有确定的返回值)，会立即向微任务队列添加一个微任务then，但不需等待

    • TC 39 对await 后面是 promise 的情况如何处理进行了一次修改，移除了额外的两个微任务，在早期版本，依然会等待两个 then 的时间

例1：

async function async2 () {
    new Promise((resolve, reject) => {
        resolve()
    })
}

async function async3 () {
    return new Promise((resolve, reject) => {
        resolve()
    })
}

async function async4 () {
    return {
        then (cb) {
            cb();
        }
    }
}


async function async1 () {
    // 方式一：最终结果：B A C D
    // await new Promise((resolve, reject) => {
    //     resolve()
    // })

    // 方式二：最终结果：B A C D
    // await async2()

    // 方式三：最终结果：B C D A
    // await async3()

    // 方式四：最终结果：B C D A
    await async4()

    console.log('A')
}

async1()

new Promise((resolve) => {
    console.log('B')
    resolve()
}).then(() => {
    console.log('C')
}).then(() => {
    console.log('D')
})

解析：

• 方式一：await的是Promise，无需等待

• 方式二：await的是async函数，但是该函数的返回值本身是**非thenable**，无需等待

• 方式三：await的是async函数，且返回值本身是Promise，需等待两个then时间

• 方式四：await的是async函数，且返回值本身是thenable 类型，需等待1个then时间

例2（经典面试题）：

async function async1 () {
    console.log('1')
    await async2()
    console.log('AAA')
}

async function async2 () {
    console.log('3')
    return new Promise((resolve, reject) => {
        resolve()
        console.log('4')
    })
}

console.log('5')

setTimeout(() => {
    console.log('6')
}, 0);

async1()

new Promise((resolve) => {
    console.log('7')
    resolve()
}).then(() => {
    console.log('8')
}).then(() => {
    console.log('9')
}).then(() => {
    console.log('10')
})
console.log('11')


// 最终结果👉: 5 1 3 4 7 11 8 9 AAA 10 6