JavaScript 中处理微任务的顺序

Question

我正在解决 Javascript 中的事件循环问题，但我不明白为什么输出顺序是 2, 1，而不是 1, 2。

f1();

Promise.resolve().then(() => {
  console.log(2);
});

async function f2() {
  return new Promise((resolve) => {
    resolve();
  });
}

async function f1() {
  f2().then(() => {
    console.log(1);
  });
}

让我告诉你我的理由：

1. 据我了解，调用 stask 中的第一个任务将是 f1。该函数是异步的并返回一个承诺。

2. f1 正在执行。

3. f1 内部有一个对 f2 的调用，它返回一个 Promise 并立即解决它。因此，“then”中包含console.log(1)的回调被添加到微任务队列中。

4. 调用堆栈上还剩下一项任务 - Promise.resolve()。这里“then”中包含 console.log(2) 的回调也最终出现在微任务队列中。

5. 调用堆栈为空，这意味着事件循环按顺序执行微任务队列中的任务 - 1、2。

在其中一些步骤中，我的推理肯定是错误的。如果有人帮助我，我将非常感激！）

Answer 1

当然，这里有两个关键点可以理解为什么输出是“2, 1”而不是“1, 2”：

异步函数行为：

f2() 是一个异步函数。尽管它返回一个已解决的 Promise，但它是一个异步函数这一事实意味着它始终返回一个 Promise。 当调用异步函数时，它立即返回一个 Promise，并且该函数继续异步执行。它不会阻止调用函数的执行。 微任务队列执行顺序：

添加到微任务队列的回调按照添加的顺序执行。 在 f1() 中，console.log(1) 的回调被添加到微任务队列中。 接下来，Promise.resolve().then(() => { console.log(2); });将带有 console.log(2) 的回调添加到微任务队列中。 因此，当微任务执行时，输出将是“2, 1”，因为 console.log(2) 的回调首先被添加到微任务队列中。