javascript 的异步函数实际上是同步的吗？

Question

我试图弄清楚异步代码在 Javascript 中是如何工作的。现在，我了解到JS中实际上有一个单线程执行队列中的作业，并且只有在当前作业完成后才能开始执行下一个作业（即如果所有同步代码或异步函数都已完成） .

现在，令人困惑的部分是实际上算作异步函数的部分 - 哪些实际被放入队列中的单独作业中，哪些没有。

首先，我们有函数的async 关键字。那么这是否意味着这些功能将被放入队列中的单独作业中并在将来的某个地方执行？好吧，实际上答案是NO。但请耐心等待，我将解释。

据我了解，理论上，JS 线程应该首先执行所有同步代码，直到它完成，同时延迟所有异步函数、承诺和回调的执行，将它们作为作业放置到末尾队列。然后，一旦所有同步代码完成，它将开始执行所有那些堆积起来的工作。

所以如果我有以下代码：

async function asyncFunc() {
    console.log("executing async function");
}

console.log("starting sync code");
asyncFunc().then(() => {
    console.log("executing callback of async function")
});
console.log("sync code completed");

那么理论上应该先执行所有同步代码，然后才开始执行异步函数，然后是回调：

starting sync code
sync code completed
executing async function
executing callback of async function

但实际情况不同！实际上，它实际上同步地 执行异步函数，以及其余的同步代码。唯一真正放入作业队列的是异步函数的回调：

starting sync code
executing async function
sync code completed
executing callback of async function

那是什么意思？ async 函数实际上是一个谎言？看起来是这样，因为它们实际上是 正常的同步函数，您可以碰巧将 async 回调附加到它们。

现在，我知道async 实际上是返回Promise 的函数的语法糖，例如：

async function asyncFunc() {
    console.log("executing async function");
}

是语法糖：

function asyncFunc() {
    return new Promise((resolve) => {
        console.log("executing async function");
        resolve();
    });
}

但我的观点仍然存在。您传递给 Promise 的所谓异步函数实际上是同步执行的。好吧，从技术上讲，Promise 对象并不意味着它将异步执行，但 async 关键字却可以！所以这是彻头彻尾的虚假信息，它让你相信它是异步的，而事实证明并非如此。

Answer 1

这里的解释很清楚，没有混淆：https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await

有关说明，请参阅上述链接中的“处理异步/等待减速”部分。

Answer 2

只是为了证明我和@CertainPerformance 的观点。 这是相同的示例，其中的睡眠函数在等待解析之前等待 500 毫秒：

async function sleep(msec) {
  return new Promise(resolve => setTimeout(resolve, msec));
}

async function asyncFunc() {
  await sleep(500);
  console.log("executing async function");
}

console.log("starting sync code");
asyncFunc().then(() => {
  console.log("executing callback of async function")
});
console.log("sync code completed");

这里只有一个 console.log：

async function sleep(msec) {
  console.log('test');
} 

async function asyncFunc() {
  await sleep(500);
  console.log("executing async function");
}

console.log("starting sync code");
asyncFunc().then(() => {
  console.log("executing callback of async function")
});
console.log("sync code completed");

Answer 3

就像构造 Promise 时一样，async 函数中的任何同步操作在遇到任何 awaits 之前都会同步执行。 async 函数只会在遇到 await 时停止执行其代码 - 在那之前，它也可能是一个普通的非 async 函数（除了它将返回值包装在承诺）。

async function asyncFunc2() {
  console.log("in Async function 2");
}
async function asyncFunc1() {
  console.log("in Async function 1");
  await asyncFunc2();
  console.log('After an await');
}
console.log("starting sync code");
asyncFunc1().then(() => {
  console.log("Received answer from async code");
});
console.log("finishing sync code");

正如您在上面的 sn-p 中看到的，主线程仅在 asyncFunc1 的 await 之外恢复一次 asyncFunc1（以及由该 @987654330 调用的所有 同步代码@) 已完成。

async 是一个关键字，它允许您在函数内部使用await，但它本质上 没有任何其他含义，真的 - 它只是一个关键字。函数可能甚至可以同步运行它的所有代码（虽然这看起来有点奇怪）。