JavaScript的async/await无法正确等待？

Question

我在使用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

请问有人能指出我在这个问题中做错了什么吗？

- CaptObvious

---

你还没有等待调用 foo 的回应。 - Daniel A. White

你说得没错，但这仍然无法解释为什么foo()返回的是undefined而不是"foo"。 - CaptObvious

这是因为您打破了底层的承诺链。 - Daniel A. White

你如何期望在控制台输出"foo"？你认为哪一行代码会输出它？所有的console.log都是数字，你从未使用过console.log('foo')。 - Jaromanda X

Answer 1

顶层代码是同步运行的（一如既往），在继续执行console.log("6");之前不会等待foo();的解决。将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);
})();

- CertainPerformance

---

没错，但这并不能解释为什么它返回的是 undefined 而不是 foo。 - CaptObvious

undefined is the "result" of the last console.log ... type console.log('hello') in the develoepr tools console ... oputput is hello and undefined - Jaromanda X

事实证明，我提供的示例并没有准确地复现我遇到的问题。我将在创建准确的复制品后重新发布此问题。由于您提供的答案确实回答了所问的问题，并且可能有助于未来的人们，因此我将继续将其标记为答案。谢谢！ - CaptObvious