0

0

JavaScript 中 Promise 链的执行顺序与微任务队列调度深度解析

花韻仙語

花韻仙語

发布时间:2026-02-16 10:29:03

|

419人浏览过

|

来源于php中文网

原创

JavaScript 中 Promise 链的执行顺序与微任务队列调度深度解析

本文深入剖析 Promise .then() 回调返回值类型(普通值 vs Promise)如何影响微任务入队顺序,通过代码示例揭示为何 console.log(4) 先于 console.log(2) 执行,并给出可复现的验证逻辑与关键注意事项。

本文深入剖析 promise `.then()` 回调返回值类型(普通值 vs promise)如何影响微任务入队顺序,通过代码示例揭示为何 `console.log(4)` 先于 `console.log(2)` 执行,并给出可复现的验证逻辑与关键注意事项。

在 JavaScript 的事件循环机制中,Promise 的 .then() 方法始终返回一个新 Promise,并将回调函数的返回值(无论是否为 Promise)自动包装或透传,进而决定后续 .then() 的执行时机。关键差异在于:

  • ✅ *返回普通值(如 `res 4)**:该值被隐式包裹为Promise.resolve(res * 4),立即进入微任务队列,后续.then()` 可快速排队;
  • ⚠️ 返回显式 Promise(如 new Promise(...)):该 Promise 的 resolve() 调用本身是异步的(即使同步 resolve),其 then 回调需等待该 Promise fulfilled 后再入队,因此产生额外延迟。

我们来逐步分析原始代码的执行流:

let x = new Promise(resolve => setTimeout(() => resolve(1), 0));

x.then(res => new Promise(resolve => resolve(res * 2))) // A链:返回新Promise
  .then(res => console.log(res)); // A2:依赖A链Promise完成

x.then(res => res * 4) // B链:返回普通值 → 等价于 Promise.resolve(res * 4)
  .then(res => console.log(res)); // B2:立即可入队

console.log("Out");

执行时序如下(基于微任务队列 FIFO + Promise 状态流转):

  1. console.log("Out") 同步输出 → "Out"
  2. x 在 setTimeout 回调中 fulfilled 为 1,触发所有注册的 .then();
  3. B链先入队:x.then(res => res * 4) 返回 4 → 立即创建 Promise.resolve(4) → 其 .then()(即 console.log(4))作为第一个微任务入队;
  4. A链后入队:x.then(res => new Promise(...)) 返回一个新 Promise,该 Promise 内部 resolve(2) 是同步执行,但它的 .then()(即 console.log(2))必须等待该 Promise fulfilled 后才被推入微任务队列 → 成为第二个微任务
  5. 微任务队列清空:先执行 console.log(4),再执行 console.log(2)。

✅ 验证结论:以下等价写法输出顺序完全一致(均为 4 → 2):

搜狐资讯
搜狐资讯

AI资讯助手,追踪所有你关心的信息

下载

立即学习Java免费学习笔记(深入)”;

// 原始A链(显式Promise)
x.then(res => new Promise(r => r(res * 2))).then(console.log);

// 等价于:先透传res,再乘2 → 但注意:这是两轮微任务!
x.then(res => res).then(res => res * 2).then(console.log); // 输出2,但比B链慢

// B链(普通值)
x.then(res => res * 4).then(console.log); // 输出4,更快入队

? 关键注意事项

  • 不要误认为“先声明的 .then() 就先执行”——实际取决于每个 .then() 回调返回值的类型及其对应 Promise 的 fulfill 时机
  • 即使 new Promise(r => r(val)) 是同步 resolve,它仍会生成一个新 Promise 对象,其后续 .then() 的注册和执行仍需经历一次微任务调度,相比 Promise.resolve(val) 存在不可忽略的调度层级差异;
  • 调试建议:使用 queueMicrotask(() => console.log('micro')) 或浏览器 DevTools 的 Async Stack Trace 查看微任务实际入队顺序。

? 总结:控制 Promise 链响应速度的核心,在于优先返回普通值而非手动构造 Promise;若需异步逻辑,应确保内部异步操作必要且高效,避免无意义的 Promise 嵌套。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
console接口是干嘛的
console接口是干嘛的

console接口是一种用于在计算机命令行或浏览器开发工具中输出信息的工具,提供了一种简单的方式来记录和查看应用程序的输出结果和调试信息。本专题为大家提供console接口相关的各种文章、以及下载和课程。

419

2023.08.08

console.log是什么
console.log是什么

console.log 是 javascript 函数,用于在浏览器控制台中输出信息,便于调试和故障排除。想了解更多console.log的相关内容,可以阅读本专题下面的文章。

524

2024.05.29

promise的用法
promise的用法

“promise” 是一种用于处理异步操作的编程概念,它可以用来表示一个异步操作的最终结果。Promise 对象有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。Promise的用法主要包括构造函数、实例方法(then、catch、finally)和状态转换。

320

2023.10.12

html文本框类型介绍
html文本框类型介绍

html文本框类型有单行文本框、密码文本框、数字文本框、日期文本框、时间文本框、文件上传文本框、多行文本框等等。详细介绍:1、单行文本框是最常见的文本框类型,用于接受单行文本输入,用户可以在文本框中输入任意文本,例如用户名、密码、电子邮件地址等;2、密码文本框用于接受密码输入,用户在输入密码时,文本框中的内容会被隐藏,以保护用户的隐私;3、数字文本框等等。

416

2023.10.12

pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

149

2026.02.13

微博网页版主页入口与登录指南_官方网页端快速访问方法
微博网页版主页入口与登录指南_官方网页端快速访问方法

本专题系统整理微博网页版官方入口及网页端登录方式,涵盖首页直达地址、账号登录流程与常见访问问题说明,帮助用户快速找到微博官网主页,实现便捷、安全的网页端登录与内容浏览体验。

104

2026.02.13

Flutter跨平台开发与状态管理实战
Flutter跨平台开发与状态管理实战

本专题围绕Flutter框架展开,系统讲解跨平台UI构建原理与状态管理方案。内容涵盖Widget生命周期、路由管理、Provider与Bloc状态管理模式、网络请求封装及性能优化技巧。通过实战项目演示,帮助开发者构建流畅、可维护的跨平台移动应用。

35

2026.02.13

TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

14

2026.02.13

Redis高可用架构与分布式缓存实战
Redis高可用架构与分布式缓存实战

本专题围绕 Redis 在高并发系统中的应用展开,系统讲解主从复制、哨兵机制、Cluster 集群模式及数据分片原理。内容涵盖缓存穿透与雪崩解决方案、分布式锁实现、热点数据优化及持久化策略。通过真实业务场景演示,帮助开发者构建高可用、可扩展的分布式缓存系统。

19

2026.02.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 5.1万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号