代码之家 › 专栏 › 技术社区 › Ulysse BN

JavaScript中无等待的异步函数

async-await asynchronous javascript

103

Ulysse BN · 技术社区 · 7 年前

我有两个功能, a b ,即异步,前者没有 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>

等候 ,该函数似乎是同步的。但是有 倒转的 因为函数是异步执行的。

async 等候 关键字是否存在?

实际用例: 我有一个

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

)}

4 回复 | 直到 3 年前

Bergi Ray Nicholus 2 年前

Mozilla documentation :

异步函数可以执行异步函数并等待传递的承诺返回解析值。

正如您所假设的那样,如果不存在等待,则执行不会暂停,代码将正常同步执行。

Inigo 2 年前

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);

像是异步的,其余的都是同步的,包括承诺,因此输出是

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

正在删除 等候 将使完整 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);

Barmar 7 年前

该函数的执行方式与带或不带相同 await 什么 等候

await timeout(1000);
more code here;

大致相当于:

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

这个 async function

tevemadar 4 年前

正如其他答案所说/表明的那样:一个 async function await 等候 ,它完全运行。

async 无条件地使您的结果成为 Promise

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);