本文深入探讨了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
在这个例子中，当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如何将函数的执行拆分，并在微任务队列中进行调度。
“Tick” 概念的混淆与澄清
关于await后的代码是否在“下一个tick”执行的疑问，主要源于不同文档对“tick”一词定义的差异。
1. 事件循环的“迭代”或“阶段”
Node.js 的定义： Node.js 文档将事件循环定义为一系列阶段（timers, pending callbacks, poll, check, close callbacks），一个完整的循环迭代被视为一个“tick”。在这个宽泛的“tick”内，会执行许多计划好的回调，包括来自微任务队列的回调。setImmediate()会在“下一个迭代或‘tick’”触发，这里“tick”指一个完整的事件循环周期。MDN/HTML Standard 的定义： HTML标准和MDN文档通常更通用地描述事件循环。一个事件循环迭代会选择并执行至多一个宏任务（task），然后处理所有待处理的微任务，最后可能进行渲染和绘制，然后再次循环。
2. “Tick”作为“单个回调的执行”
MDN 在某些上下文中，例如讨论Promise链时，会将“tick”理解为引擎启动一个Promise .then()回调，或者更广泛地指从任何队列中调用一个回调。例如，在一个Promise链中，每个.then()回调可能被描述为在“一个单独的tick”中执行，以强调它们是异步的且按顺序处理的。
myPromise .then((value) => `${value} and bar`) // 这是一个“tick” .then((value) => `${value} and bar again`) // 这是另一个“tick” // ...
这种定义使得“多个tick”才能执行完一个Promise链，与Node.js中一个“tick”包含所有微任务的理解形成对比。
3. process.nextTick() 的特殊性
在Node.js环境中，process.nextTick()函数调度一个回调，这个回调的队列会在当前事件循环迭代中，甚至在微任务队列（Promise回调、await后续代码）之前被处理。这进一步说明了“tick”这个词在不同语境下的含义复杂性。
结论与建议
你的理解是正确的：await关键字后的代码（被推入微任务队列的部分）确实是在当前事件循环的同一迭代中执行的，而不是在“下一个事件循环迭代”（宏任务）中。微任务队列会在当前宏任务执行完毕后，但在事件循环进入下一个宏任务之前被完全清空。
造成混淆的根本原因是“tick”这个词在不同上下文和不同文档（MDN、Node.js）中被赋予了不同的含义。为了避免这种歧义，建议在讨论事件循环和异步调度时，尽量避免使用“tick”这个词，而是使用更精确的术语，如：
事件循环迭代 (Event Loop Iteration)： 指事件循环从头到尾执行一次所有阶段的过程。宏任务队列 (Task Queue)： 存储像setTimeout、setInterval、I/O等回调的队列。微任务队列 (Microtask Queue)： 存储像Promise .then()/.catch()/.finally()、async/await后续代码、queueMicrotask等回调的队列。当前执行栈 (Current Execution Stack)： 正在同步执行的代码。
理解await如何利用微任务队列来调度异步操作，对于编写高效且可预测的JavaScript异步代码至关重要。始终记住，微任务总是优先于下一个宏任务执行，这确保了异步操作的及时响应性。
以上就是JavaScript await 行为与事件循环中的 ‘Tick’ 概念辨析的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1541893.html
微信扫一扫 
支付宝扫一扫 
