关于async函数返回值的有无对执行顺序影响的问题

新手上路,请多包涵

本人js小白,最近在学习异步函数的时候遇到了如下问题:

第一段代码是返回Promise的异步函数,得到了以下结果

// 函数返回Promise
async function f1(msg) {
    return new Promise((res, rej) => {
        console.log(msg, "begin")
        setTimeout(() => {
            res("f1 resolved")
            console.log(msg, "end")
        }, 1000)
    })
}

(async () => {
    await f1("1").then(async (re) => {
        console.log(re)
        await Promise.all([
            f1("2"),
            f1("3"),
            f1("4"),
        ])
        await f1("5")
    })
})()
/*
执行结果为
1 begin
1 end
f1 resolved
2 begin
3 begin
4 begin
2 end
3 end
4 end
5 begin
5 end
 */

第二段函数中,我尝试去掉了异步函数的返回值,根据我的理解,此时应该返回一个Promise.resolve(undefined), 但我无法理解下边的执行结果

// 函数为void返回值
async function f2(msg) {
    new Promise((res, rej) => {
        console.log(msg, "begin")
        setTimeout(() => {
            res("f1 resolved")
            console.log(msg, "end")
        }, 1000)
    })
}
(async () => {
    await f2("1").then(async (re) => {
        console.log(re)
        await Promise.all([
            f2("2"),
            f2("3"),
            f2("4"),
        ])
        await f2("5")
    })
})()

/*
执行结果为
1 begin
undefined
2 begin
3 begin
4 begin
5 begin
1 end
2 end
3 end
4 end
5 end
 */

请问大神们为什么第二种情况中then的回调函数提前执行了呢?
万分感谢

阅读 1.9k
2 个回答

原因很明显啊, 第一个函数你 return 了一个 Promise 对象,因此 await f1("1") 返回的就是这个 Promise 对象, 然后你对这个 Promise 对象做了 then ,所以 await f2("1").then(async (re) 中的 re 便是你返回的 Promise 对象中的 resolve 内容("f1 resolved"),当然要等到 res("f1 resolved") 到了才会继续执行;

而第二个你没有返回,因此 await f2("1") 返回的是一个 new Promise(resolve => resolve(undefined) ) 这个 Promise , 和函数中你 手动 new Promise 没有关系,所以就各自管各自执行了, 而 await f2("1").then(async (re) 中的 re 很明显也就是 undefined ;

async 如果没返回的话 等同于返回Promise.resolve(undefined) 所以不等待你的promise resolve直接往下走了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题