Promise与async/await：仅为语法糖？如何改写获相同执行顺序？

常有人说async/await只是Promise的语法糖，两者代码可互相转换。但下面的Promise代码执行顺序为：after promise.then() → promise resolved value → end；用async/await改写后执行顺序改变，请问如何改写async/await代码以得到相同执行顺序？

原Promise代码示例 #

async function main() {
    const promise = new Promise((resolve) => {
        return resolve('promise resolved value')
    })

    promise.then((res) => console.log(res))
    console.log('after promise.then()')
}

main().then((res) => console.log('end'))

输出：

after promise.then()
promise resolved value
end

问题所在的async/await写法 #

你当前的async/await代码会先等待异步函数执行完成，再打印后续内容，这和原Promise逻辑不符——原代码是先注册then回调，不等待回调执行就直接走同步打印，then回调会在当前同步任务结束后才执行。

async function main() {
    const asyncFunc = async () => {
        return 'async func resolved value'
    }
    console.log(await asyncFunc())
    console.log('after await asyncFunc()')
}

main().then((res) => console.log('end'))

输出：

async func resolved value
after await asyncFunc()
end

正确的async/await改写方案 #

要还原原Promise的执行顺序，关键是先拿到异步函数返回的Promise对象，不立即await，而是先注册回调，再执行同步打印，最后可选择await该Promise确保main函数的状态正确：

async function main() {
    const asyncFunc = async () => {
        return 'async func resolved value'
    }
    // 先获取Promise对象，不立即await
    const promise = asyncFunc()
    // 注册回调，和原Promise的then逻辑一致
    promise.then(res => console.log(res))
    // 同步打印，优先于回调执行
    console.log('after await asyncFunc()')
    // 可选：await该Promise，保证main的then回调在所有操作后执行
    await promise
}

main().then((res) => console.log('end'))

输出：

after await asyncFunc()
async func resolved value
end

逻辑说明 #

这样改写后，执行逻辑和原Promise代码完全对齐：

1. 创建Promise对象并注册then回调
2. 同步执行打印语句，这是当前任务栈里的优先操作
3. 当前同步任务执行完毕后，事件循环启动，执行then回调中的打印
4. 最后main函数的then回调执行，打印end

内容的提问来源于stack exchange，提问作者Marek Mezei