无需登录 数据私有 本地保存

Promise 链可视化 - 异步流程时间轴

JavaScript 教育 Promise 可视化 异步 链式
60
0
0
0
Promise：JavaScript 中用于处理异步操作的核心对象，代表一个异步操作的最终完成或失败及其结果值。Promise 有三种状态：pending（待处理）、fulfilled（已完成）和 rejected（已拒绝）。状态一旦改变便不可逆转。 链式调用：通过连续调用 Promise 对象的 then 方法将多个异步操作串联起来的编程模式。每个 then 方法返回一个新的 Promise，使得后续操作可以继续链式编排，避免了回调地狱的问题。 回调地狱：多层嵌套回调函数导致的代码结构混乱现象，表现为代码向右不断缩进形成金字塔形状。Promise 和 async await 的出现正是为了解决这一问题。 resolve：将 Promise 的状态从 pending 变为 fulfilled 的操作，通常伴随一个结果值。调用 resolve 后，对应的 then 回调会被执行。 reject：将 Promise 的状态从 pending 变为 rejected 的操作，通常伴随一个错误原因。调用 reject 后，对应的 catch 回调或 then 的第二个参数会被执行。 then：Promise 原型上的方法，用于注册当 Promise 状态变为 fulfilled 时的回调函数。then 方法返回一个新的 Promise，支持链式调用。 catch：Promise 原型上的方法，用于注册当 Promise 状态变为 rejected 时的回调函数。catch 本质上是 then(null, onRejected) 的语法糖，同样返回新的 Promise。 finally：Promise 原型上的方法，用于注册无论 Promise 成功或失败都会执行的回调。finally 回调不接收参数，且返回的 Promise 状态与原 Promise 一致。 Promise.all：接受一个 Promise 数组作为参数，返回一个新的 Promise。当所有输入 Promise 都 fulfilled 时，结果 Promise 以结果数组 fulfilled；当任一输入 Promise rejected 时，结果 Promise 立即 rejected。 Promise.race：接受一个 Promise 数组作为参数，返回一个新的 Promise。结果 Promise 的状态和值由第一个改变状态的输入 Promise 决定，无论该 Promise 是 fulfilled 还是 rejected。 Promise.allSettled：接受一个 Promise 数组作为参数，返回一个新的 Promise。当所有输入 Promise 都已确定（无论 fulfilled 或 rejected）时，结果 Promise 以状态描述数组 fulfilled。 Promise.any：接受一个 Promise 数组作为参数，返回一个新的 Promise。当任一输入 Promise fulfilled 时，结果 Promise 以该值 fulfilled；当所有输入 Promise 都 rejected 时，结果 Promise 以 AggregateError rejected。 微任务队列：Promise 回调函数执行所处的队列。微任务的优先级高于宏任务（如 setTimeout 回调），在当前宏任务执行完毕后、下一个宏任务开始前，微任务队列中的所有任务会被依次执行完毕。 未处理 Promise 拒绝：当 Promise 被 reject 且没有注册对应的 catch 回调时，该拒绝被视为未处理。在浏览器环境中会触发 unhandledrejection 事件，可能导致程序异常。 async await：ES2017 引入的异步编程语法糖，await 表达式会暂停 async 函数的执行直到等待的 Promise 完成，并返回完成值。async 函数始终返回 Promise。 三维时间线：本工具采用的可视化方式，通过三维坐标系展示 Promise 节点之间的时空关系。X 轴表示时间维度，Y 轴表示 Promise 编号，Z 轴表示调用层级深度。
🔧 相关工具