JavaScript async/await 没有正确等待？

Posted 2023-03-07

【中文标题】JavaScript async/await 没有正确等待？

【英文标题】：JavaScript async/await not awaiting properly?

【发布时间】：2018-09-28 02:10:18

【问题描述】：

我遇到了 javascript 的 async/await 函数的问题。这发生在我无法分享其源代码的内部应用程序上，但我对我的问题进行了快速通用复制：

function sleep(ms) 
  return new Promise(resolve => setTimeout(resolve, ms));


async function baz(input) 
  console.log("4");
  await sleep(1000);
  console.log("5");
  return input;


async function bar(input) 
  console.log("3");
  return await baz(input);


async function foo() 
  console.log("2");
  const foo = await bar("foo");
  return foo;


console.log("1");
foo();
console.log("6");

我希望这会在 4 和 5 之间等待一秒钟后返回以下内容：

1
2
3
4
5
6
"foo"

相反，在 Chrome 64.0.3282.167 和 Firefox 58.0.2 的控制台中尝试此操作后，我收到以下信息：

1
2
3
4
6
undefined
5

请有人指出我在这方面哪里出错了？

【问题讨论】：

您还没有等待您致电foo。

你就在那里，但这仍然不能解释为什么 foo() 返回 undefined 而不是 "foo"。

因为你破坏了底层的承诺链。

你怎么能期望"foo" 被输出到控制台？你认为你的代码的哪一行输出了那个？你所有的console.log都是数字的，你不是一次console.log('foo')

【参考方案1】：

顶层同步运行（一如既往）——它不会等待foo(); 解决，然后继续console.log("6");。将foo 的调用包装在异步中，然后将await 包装起来。 foo 的返回值如果要稍后显示，还需要保存：

function sleep(ms) 
  return new Promise(resolve => setTimeout(resolve, ms));


async function baz(input) 
  console.log("4");
  await sleep(1000);
  console.log("5");
  return input;


async function bar(input) 
  console.log("3");
  return await baz(input);


async function foo() 
  console.log("2");
  const foo = await bar("foo");
  return foo;


(async () => 
  console.log("1");
  const str = await foo();
  console.log("6");
  console.log(str);
)();

【讨论】：

对，但这并不能解释为什么它返回 undefined 而不是 foo。

undefined 是最后一个console.log 的“结果” ...在开发工具控制台中输入console.log('hello') ...输出为hello 和undefined

原来我给出的例子并没有准确地重现我遇到的问题。一旦我创建了一个准确的复制品，我将重新发布这个问题。由于您提供的答案确实回答了所提出的问题，并且将来可能会对人们有所帮助，因此我将继续将其标记为答案。谢谢！