异步 Javascript 混乱

Question

我对 Javascript 还很陌生，写这篇文章是我的头脑，所以如果我有任何错误，请纠正我。

据我所知，异步函数允许其他进程在后台运行，然后在函数完成后，它返回一个可以解决或拒绝的承诺。此外，由于异步函数中的进程不会按设定的顺序运行，我们可以使用 await 关键字来停止执行，直到进程完成。

然而，让我感到困惑的是两者在代码执行上的差异

function f1() {
  //do stuff
}

function f2() {
  //do stuff
}

function f3() {
  //do stuff
}

async function asyncFunc() {
  f1()
  f2()
  f3()
}

asyncFunc()

还有这个：

async function asyncf1() {
  //do stuff
}

async function asyncf2() {
  //do stuff
}

async function asyncf3() {
  //do stuff
}

function f() {
  asyncf1()
  asyncf2()
  asyncf3()
}

f()

????? （除了第一个示例返回一个承诺这一显而易见的事实）

在同步函数中调用异步函数与在异步函数中调用同步函数是一回事吗？它们都产生相同的输出吗？如果是这样，哪一个比另一个更受欢迎？

Answer 1

要理解的关键是async 函数是使用promises 的语法糖。 async 函数和承诺都不会在后台发生任何事情。它们让您等待已经在后台发生的事情并做出反应（例如计时器或 HTTP 操作完成）。

async 函数在第一个 await 或 return 之前是同步的。 （这样它就可以启动它然后等待的任何异步过程。）此时，它返回一个承诺，该承诺将根据awaited 和/或者你返回什么。

await 暂停函数的逻辑，直到/除非承诺是 awaited 解决。 （如果你使用await value，而value 不是thenable [类似promise 的东西]，那么你实际上是在做await Promise.resolve(value)。）

您没有显示 asyncFuncX 函数的任何内容，但除非它们 await 某些东西，否则它们是完全同步的。

您可能会发现my answer from a couple of days ago 也很有用。

Answer 2

在同步函数中调用异步函数与在异步函数中调用同步函数是一样的吗？

一点也不。 async 函数由 JavaScript 执行环境安排在单独的 microtasks 中执行（在第一个 await、as explained in TJ Crowder's answer 之后），在同步函数的流程之外。这意味着async函数（可以）在调用同步函数被return退出后继续运行。

如果你运行下面的sn-p，你可以看到输出是in、out、f1、f2、f3，即使f函数显然看起来是@ 987654333@，f1，f2，f3，out。

（该示例有一个额外的await noop() 来真正实现异步。）

async function noop() {}

async function asyncf1() {
  await noop();
  console.log('f1');
}

async function asyncf2() {
  await noop();
  console.log('f2');
}

async function asyncf3() {
  await noop();
  console.log('f3');
}

function f() {
  console.log('in');
  asyncf1();
  asyncf2();
  asyncf3();
  console.log('out');
}

f()

相反，在async 函数中调用同步函数可以工作，但会阻止该任务，并且由于 JavaScript 引擎是单线程的 JavaScript 代码，它会阻止所有其他 async 任务“同时执行” "也是。

它们都产生相同的输出吗？

他们没有。 （或者，好吧，这是一个哲学问题。如果函数不返回任何东西或不做任何事情，那么是的，结果可能被认为是相同的。）