javascript - ECMAScript7 async/await 不一致的行为取决于是否在箭头函数中使用括号

Question

使用现代 ES6+ async/await 时，我在 Google Chrome 60.0.3112.78(官方构建)(64 位) 中遇到不一致的行为，这取决于我是否在返回的箭头函数中使用括号 promise 。同样的情况也发生在 Node.js 中。我无法理解原因。

我知道这不是实现 sleep() 函数的方法，但这是最简单的演示方法。考虑以下示例代码片段。

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

(async () => {
  console.log('a');
  await sleep(5000);
  console.log('b');
})()

正如预期的那样，这会将 a 写入控制台，等待 5 秒，然后将 b 写入控制台。

---

使用箭头函数返回 Promise 的更短符号。

const sleep = ms => { return new Promise(resolve => setTimeout(resolve, ms)) }

(async () => {
  console.log('a');
  await sleep(5000);
  console.log('b');
})()

正如预期的那样，此代码的行为相同。 a 和 b 以 5000 毫秒 间隔写入控制台。

---

以下代码不起作用。唯一的区别是我没有将 Promise 的返回值放在第一行的括号中。

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

(async () => {
  console.log('a');
  await sleep(5000);
  console.log('b');
})()

在这种情况下，await sleep 不起作用。事实上，这段代码什么也没做。它不会向控制台记录任何内容，不是 a 也不是 b。

我认为自己相当有经验，但我目前不明白这一点。为什么括号在这种特殊情况下很重要？返回值是相同的，对吧？为什么连字符 a 都没有被控制台记录？

请有人准确、具体地向我解释为什么会这样。这是一个错误还是我只需要自己 sleep ？

非常感谢。

Answer 1

重要的是箭头函数后面的分号。写

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
//                                                                 ^

它会起作用的。请注意，下一行以 ( 开头，这是语法上有效的延续，因此 ASI 不会跳入。您的代码被解析并解释为

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))(async () => { … })()

但是函数 sleep 从未被调用。