JavaScript 中没有等待的异步函数

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:

一个异步函数可以包含一个等待表达式，它会暂停 执行异步函数并等待传递的 Promise 解决，然后恢复异步函数的执行和 返回解析后的值。

正如您所假设的，如果没有等待，则不会暂停执行，然后您的代码将以非阻塞方式执行。

Answer 2

在执行 JavaScript 异步函数之前，一切都是同步的。在使用 async-await 时，await 是异步的，await 之后的所有内容都放在事件队列中。类似于.then()。

为了更好地解释，举个例子：

function main() {
  return new Promise( resolve => {
    console.log(3);
    resolve(4);
    console.log(5);
  });
}

async function f(){
    console.log(2);
    let r = await main();
    console.log(r);
}

console.log(1);
f();
console.log(6);

由于await是异步的，其余都是同步的，包括promise，所以输出是：

1
2
3
5
6
// Async happened, await for main()
4

main() 的类似行为也没有承诺：

function main() {
    console.log(3);
    return 4;
}

async function f(){
    console.log(2);
    let r = await main();
    console.log(r);
}

console.log(1);
f();
console.log(5);

输出：

1
2
3
5
// Asynchronous happened, await for main()
4

仅删除 await 将使整个 async 函数同步。

function main() {
    console.log(3);
    return 4;
}

async function f(){
    console.log(2);
    let r = main();
    console.log(r);
}

console.log(1);
f();
console.log(5);

输出：

1
2
3
4
5

Answer 3

无论有没有await，函数的执行方式都是一样的。 await 所做的是自动等待函数返回的 promise 被解析。

await timeout(1000);
more code here;

大致相当于：

timeout(1000).then(function() {
    more code here;
});

async function 声明只是让函数自动返回一个在函数返回时解析的承诺。

Answer 4

正如其他答案所说/表明：async function 只是在现场运行，直到遇到await - 如果没有await，它会完全运行。

值得补充的是async 无条件地使您的结果为Promise。所以如果你返回一些东西，已经有区别了，如果不先返回 JS 引擎，你根本无法得到结果（类似于事件处理）：

async function four(){
  console.log("  I am four");
  return 4;
}
console.log(1);
let result=four();
console.log(2,"It is not four:",result,"Is it a promise ?", result instanceof Promise);
result.then(function(x){console.log(x,"(from then)");});
console.log(3);