javascript - JavaScript 中没有 await 的异步函数

Question

我有两个函数，a 和 b，它们是异步的，前者没有 await，后者有 await。他们都将某些内容记录到控制台并返回 undefined。调用任一函数后，我记录另一条消息并查看消息是在执行函数主体之前还是之后写入的。

function someMath() {
  for (let i = 0; i < 9000000; i++) { Math.sqrt(i**5) }
}

function timeout(n) {
   return new Promise(cb => setTimeout(cb, n))
}

// ------------------------------------------------- a (no await)
async function a() {
  someMath()
  console.log('in a (no await)')
}

// ---------------------------------------------------- b (await)
async function b() {
  await timeout(100)
  console.log('in b (await)')
}

clear.onclick = console.clear

aButton.onclick = function() {
  console.log('clicked on a button')
  a()
  console.log('after a (no await) call')
}

bButton.onclick = function() {
  console.log('clicked on b button')
  b()
  console.log('after b (await) call')
}

<button id="aButton">test without await (a)</button>
<button id="bButton">test with await (b)</button>
<button id="clear">clear console</button>

如果您在没有await 的情况下启动测试，该函数似乎会像同步一样工作。但是对于 await，消息是反转的，因为函数是异步执行的。

当没有 await 关键字时，JavaScript 如何执行 async 函数？

---

实际用例: 我有一个有条件执行的 await 关键字，我需要知道该函数是否同步执行才能呈现我的元素:

async function initializeComponent(stuff) {
   if (stuff === undefined)
      stuff = await getStuff()
   // Initialize

   if (/* Context has been blocked */)
       renderComponent() // Render again if stuff had to be loaded
}

initializeComponent()
renderComponent()

_{P.S: 标题有 JavaScript 关键字以避免与其他语言的相同问题混淆(即 Using async without await )}

Answer 1

Mozilla documentation :

An async function can contain an await expression, that pauses theexecution of the async function and waits for the passed Promise'sresolution, and then resumes the async function's execution andreturns the resolved value.

正如您假设的那样，如果不存在 await，则不会暂停执行，然后您的代码将照常同步执行。