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

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

11
0
0
0
预设场景：
任务配置
速度：
异步流程时间轴 就绪
悬停任务条查看详情
等待中 执行中 已完成 已拒绝 已跳过
执行日志
0 条记录
点击「执行」开始可视化异步流程
常见问题 & Promise 知识点
什么是 Promise 链式调用？
Promise 链式调用是指通过 .then()、.catch()、.finally() 方法将多个异步操作串联起来。每个 .then() 返回一个新的 Promise，使得异步操作可以按顺序执行，避免了「回调地狱」。上一个处理器的返回值会自动传递给下一个 .then()。
.then() 的第二个参数和 .catch() 有什么区别？
.then(onFulfilled, onRejected) 的第二个参数只能捕获当前 Promise 的 reject，而 .catch() 可以捕获链中任何位置抛出的错误。推荐使用 .catch() 统一处理错误，因为它更灵活且代码更清晰。例如：p.then(fn).catch(errHandler) 中，catch 能捕获 p 和 fn 中的错误。
Promise.all 的执行顺序是怎样的？
Promise.all([p1, p2, p3]) 会同时启动所有传入的 Promise（并行执行），但返回结果的顺序与输入数组顺序一致。只有当所有 Promise 都 fulfilled 时，整体才 fulfilled；只要任意一个 reject，整体立即 reject（其余 Promise 仍会继续执行，但结果被忽略）。
Promise.race 和 Promise.any 的区别？
Promise.race()：返回第一个敲定（无论 fulfilled 还是 rejected）的 Promise 结果。
Promise.any()：返回第一个fulfilled 的 Promise 结果；如果全部 reject，则抛出一个 AggregateError。
简记：race 比速度（不论成败），any 比成功（忽略失败除非全败）。
微任务（microtask）和宏任务（macrotask）是什么？
Promise 的 .then()、.catch() 回调属于微任务，在每轮事件循环的微任务队列中执行，优先于宏任务。
宏任务包括：setTimeout、setInterval、I/O、requestAnimationFrame 等。
执行顺序：同步代码 → 微任务队列清空 → 宏任务 → 下一轮微任务 → ... 这就是为什么 Promise.resolve().then(fn) 比 setTimeout(fn, 0) 先执行。
async/await 和 Promise 链有什么关系？
async/await 是 Promise 的语法糖，让异步代码看起来像同步代码。一个 async 函数始终返回一个 Promise；await 会暂停函数执行直到 Promise 敲定。在底层，await 相当于 .then()，而 try-catch 包裹 await 相当于 .catch()。两者可以互相转换。
.finally() 在链中何时执行？能改变返回值吗？
.finally() 在 Promise 敲定后无论如何都会执行（无论 fulfilled 还是 rejected），且不接收任何参数。它不能改变链的最终返回值或拒绝原因（除非在 finally 中抛出错误或返回 rejected Promise）。常用于清理资源、关闭加载动画等场景。
如何在 Promise 链中实现错误重试？
可以在 .catch() 中判断条件并返回一个新的 Promise 来实现重试。例如使用递归：
function retry(fn, times) { return fn().catch(err => times > 0 ? retry(fn, times-1) : Promise.reject(err)); }
也可使用指数退避策略，在每次重试前增加延迟时间，提高成功率。
🔧 相关工具