在Javascript中没有等待的异步功能

Question

我有两个函数a,b它们是异步的,前者没有await,后者则是await.他们都记录了一些东西到控制台并返回undefined.在调用任一函数后,我记录另一条消息,并查看是否在执行函数体之前或之后写入消息.

function someMath() {
  for (let i = 0; i < 3000000; 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() {
  a()
  console.log('after a (no await) call')
}

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

<button id="aButton">test without await</button>
<button id="bButton">test with await</button>
<button id="clear">clear console</button>

如果你启动测试没有await该功能似乎工作,就好像它是同步的.但是await,当函数异步执行时,消息被反转.

所以我的问题是:当没有关键字存在时javascript如何执行async函数await？

---

真实用例:我有一个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()

PS:title有javascript关键字,以避免与其他语言中的相同问题混淆(即使用async而不等待)

Answer 1

来自mozilla doc:

异步函数可以包含await表达式,它暂停执行异步函数并等待传递的Promise的解析,然后恢复异步函数的执行并返回已解析的值.

正如您所建议的那样,如果没有等待,则执行不会暂停,您的代码将同步执行.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function#Description

Answer 2

该功能在有或没有的情况下执行相同await.什么await是自动等待要解析的函数返回的承诺.

await timeout(1000);
more code here;

大致相当于:

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

该async function声明只是使功能自动返回时,函数返回的问题得以解决的承诺.

Answer 3

在执行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异步和其余所有都是同步的，包括承诺，因此输出为

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 4

正如其他答案所说/表明的那样： anasync 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);