async函数内是否需要有await,即使在调用该函数的地方有await?

huangapple go评论58阅读模式
英文:

Does async function need to have await inside it even if there is await on the caller of the function?

问题

在JavaScript中,async/await用于处理异步操作。await关键字会使执行等待,直到等待的函数执行完毕。在你提供的第一个示例中,为什么myAsyncFunction需要一个Promise内部的延迟是因为它内部的setTimeout是一个异步操作,而async函数默认会等待所有内部的await表达式完成后再继续执行。

如果你将setTimeout直接放在myAsyncFunction中,如你提供的第二个示例,那么myAsyncFunction将不会等待setTimeout完成,而会直接执行后续的代码。这就是为什么你的第二个示例中,"Async function resumed"会在"setTimeout"之前被打印出来。

因此,为了确保在myAsyncFunction中的异步操作完成后再继续执行后续的代码,需要使用Promise来包装这个异步操作,并且在Promise被resolve后,await才会让执行继续。这就是你提供的第一个示例中的做法。

英文:

i have a confusion on how async/await works in JS.
i know await will let the exceution to wait until the awaited function is done

but in this example:

async function myAsyncFunction() {
  console.log("Inside async function");
  await new Promise(function(myResolve, myReject) {
    // "Producing Code" (May take some time)
    setTimeout(() => {
      console.log('setTimeout');
      myResolve();
    }, 3000);
  });
  console.log("Async function resumed");
}

async function callerFunction() {
  console.log("Before calling async function");
  await myAsyncFunction();
  console.log("After calling async function");
}

callerFunction();

its not clear to me why MyAsyncFunction need a promise inside of it for the callerFunction to wait for myAsyncFunction

why this solution doesn't let the excecution wait:

async function myAsyncFunction() {
  console.log("Inside async function");
    setTimeout(() => {
      console.log('setTimeout');
    }, 3000);
  console.log("Async function resumed");
}

async function callerFunction() {
  console.log("Before calling async function");
  await myAsyncFunction();
  console.log("After calling async function");
}

callerFunction();

答案1

得分: 3

当你将一个函数标记为async时:

  • 它返回一个Promise,该Promise会解析为函数返回的内容。
  • 它开始支持await关键字。

简单地返回一个Promise很少有用。这是支持await的必然结果。


await使函数休眠,直到await右侧的Promise解析完成。

在第二个示例中:

async function myAsyncFunction() {
  console.log("Inside async function");
  setTimeout(() => {
    console.log('setTimeout');
  }, 3000);
  console.log("Async function resumed");
}

myAsyncFunction

  1. 记录 Inside async function
  2. 传递一个回调给setTimeout
  3. 记录 Async function resumed

它返回一个解析为undefined的Promise(因为它是async函数,且没有返回语句)。

在将来的某个时刻,超时触发回调函数。

它从未暂停,因为没有await语句(因此上面步骤3的日志是误导性的)。

英文:

When you mark a function as async:

  • It returns a promise which resolves to whatever the function returns.
  • It begins to support the await keyword.

Simply returning a promise is rarely useful. That is a necessary consequence of supporting await.


await sends the function is belongs to to sleep until the promise on the right hand side of the await has resolved.

In the second example:

> async function myAsyncFunction() {
> console.log("Inside async function");
> setTimeout(() => {
> console.log('setTimeout');
> }, 3000);
> console.log("Async function resumed");
> }

myAsyncFunction:

  1. Logs Inside async function
  2. Passes a callback to setTimeout
  3. Logs Async function resumed

It returns a promise that resolves as undefined (since it is async and there is no return statement).

At some point in the future the timeout triggers the callback function.

At no point does it pause, because there is no await statement (so the log at step 3 above is misleading).

huangapple
  • 本文由 发表于 2023年6月26日 19:59:26
  • 转载请务必保留本文链接:https://go.coder-hub.com/76556476.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定