JavaScript await 行为与事件循环中的 ‘Tick’ 概念辨析

admin 百科 2025-12-12 13

JavaScript await 行为与事件循环中的 'Tick' 概念辨析

本文深入探讨了javascript中`await`关键字的工作机制，特别是在事件循环和微任务调度方面的行为。我们将解析`await`如何暂停异步函数执行并将后续代码推入微任务队列，并阐明微任务在当前事件循环迭代中被处理的原理。文章还将辨析mdn和node.js文档中对“tick”概念的不同定义所导致的混淆，强调理解微任务队列在异步编程中的关键作用。

理解 async/await 的基本行为

async/await 是 JavaScript 中处理异步操作的语法糖，它使得异步代码能够以同步的、更易读的方式编写。一个async函数总是返回一个Promise。当函数内部遇到await表达式时，它会暂停执行，直到await后面的Promise解决（resolved）或拒绝（rejected）。

首先，我们来看一个不包含await的async函数示例：

async function foo(name) {
  console.log(name, "start");
  console.log(name, "middle");
  console.log(name, "end");
}

foo("First");
foo("Second");

// 预期输出：
// First start
// First middle
// First end
// Second start
// Second middle
// Second end

登录后复制

在这个例子中，尽管foo是一个async函数，但由于它内部没有await表达式，其行为与同步函数无异。两个foo函数的调用会顺序执行，所有console.log语句都在当前事件循环的同一“tick”内完成。

await 引入异步行为

当async函数中包含await表达式时，情况就变得不同了。await会暂停当前async函数的执行，并将该函数中await之后的代码推入微任务队列。这意味着await表达式本身会立即执行，但其后的代码会等待当前同步代码执行完毕后，在同一事件循环迭代的微任务阶段被执行。

立即学习“Java免费学习笔记（深入）”；

考虑以下包含await的示例：

async function foo(name) {
  console.log(name, "start");
  await console.log(name, "middle"); // 注意：await 后面是一个立即执行的表达式
  console.log(name, "end");
}

foo("First");
foo("Second");

// 预期输出：
// First start
// First middle
// Second start
// Second middle
// First end
// Second end

登录后复制

JavaScript await 行为与事件循环中的 ‘Tick’ 概念辨析-第2张图片-佛山资讯网

在这个例子中，当foo("First")执行到await console.log("First", "middle")时：

console.log("First", "middle")会立即执行并输出。
await关键字使得foo("First")函数的剩余部分（即console.log("First", "end")）被暂停，并作为一个微任务被添加到微任务队列中。
程序继续执行foo("Second")。
foo("Second")也以类似方式执行，console.log("Second", "middle")立即输出，其剩余部分（console.log("Second", "end")）作为另一个微任务被添加到微任务队列。
所有同步代码执行完毕后，事件循环开始处理微任务队列。此时，console.log("First", "end")被取出执行，然后console.log("Second", "end")被取出执行。

因此，输出的顺序展示了await如何将函数的执行拆分，并在微任务队列中进行调度。