本人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的回调函数提前执行了呢?
万分感谢
原因很明显啊, 第一个函数你
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
;