JavaScript await关键字的执行时机：await后的代码是如何与微任务队列交互的？-js教程-PHP中文网

JavaScript await关键字的执行时机：await后的代码是如何与微任务队列交互的？

DDD

发布： 2025-03-18 08:44:14

原创

263人浏览过

javascript await关键字的执行时机：await后的代码是如何与微任务队列交互的？

深入解析JavaScript异步编程中await的执行时机

本文将深入探讨await关键字的执行时机，并结合JavaScript代码示例分析其异步行为。代码示例包含setTimeout、Promise和async/await，展现了JavaScript事件循环机制下不同异步操作的交织执行。

代码如下：

console.log('start');

setTimeout(function() {
    console.log('timeout');
}, 0);

Promise.resolve().then(function() {
    console.log('promisel');
}).then(function() {
    console.log('promise2');
}).then(() => console.log(`promise3`))

async function asyncFunc() {
     await asyncSubFunc();
     Promise.resolve().then(x => {
         console.log('async end');
     })
}

async function asyncSubFunc() {
    console.log('async sub');
    return Promise.resolve().then(() => {
        console.log('async sub promise');
    });
}
asyncFunc();

console.log('end');

登录后复制

多次运行这段代码，输出顺序可能略有不同。这是因为setTimeout、Promise和async/await代表不同类型的异步任务，它们在JavaScript事件循环中竞争执行，最终顺序取决于JavaScript引擎的调度策略，并非严格按照代码书写顺序。

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

代码小浣熊

代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节

查看详情

关于“await后代码的执行时机”以及“await后的代码是否进入微任务队列”，答案并非简单的“先执行微任务队列”。 await 后面的代码并非立即执行，而是取决于await表达式等待的Promise的resolve时机。只有当await等待的Promise resolve后，await后面的代码才会执行。然而，此时可能还有其他微任务等待执行，这些微任务与await后面的代码竞争执行顺序，导致最终输出结果不可预测。例如，asyncFunc中的Promise.resolve().then(...)以及其他Promise.then(...)链式调用都会进入微任务队列，与await后的代码竞争执行。