传递Async JavaScript函数作为参数返回undefined的原因及解决办法

问题根源 #

你的代码有两个关键问题导致无法拿到预期的5：

• 传递给bar的匿名函数无返回值：调用bar时传入的async function(){ await foo("Hello World!") }仅执行了foo，但没有把foo的返回值传递出去。异步函数若没有显式return，会默认返回一个resolve为undefined的Promise，因此bar里await func()得到的结果就是undefined。
• foo函数内的延迟Promise未被等待：foo里创建了5秒延迟的Promise，但未用await等待它完成，导致函数会直接跳过延迟，立刻执行后续代码。

修复后的代码 #

async function foo(x) {
    // 等待5秒延迟生效
    await new Promise((resolve) => setTimeout(resolve, 5000));
    console.log(x);
    return 5;
 }

async function bar(func) {
    console.log(1);
    const result = await func();
    console.log(2); // 原代码中该行在return之后，永远不会执行，调整位置
    return result;
 }

(async()=>{
    // 匿名函数返回foo的执行结果
    let keys = await bar(async function(){ 
        return await foo("Hello World!"); 
    });

    console.log(`result:`, keys); // 现在会打印出result: 5
})()

关键修改说明 #

1. 给传递给bar的匿名函数添加return await foo(...)，把foo的返回值传递出去，确保func()返回的Promise能resolve为5。
2. 在foo函数中给延迟Promise加上await，让5秒延迟真正生效。
3. 调整bar函数中console.log(2)的位置，原代码中它在return之后永远不会执行，移到await func()之后才能正常打印。

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