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

Promise/异步可视化 - 状态图和时间线

13
0
0
0
Promise 状态机
resolve() reject() .then() .catch()
Pending
等待中
Fulfilled
已完成
Rejected
已拒绝
实时统计
0
Pending
0
Fulfilled
0
Rejected
模式: - 速度: 1x 耗时: 0ms
点击运行，查看实时日志...
异步任务列表
执行模式
Promise.all 全部成功才成功
Promise.race 最快结果决定
Promise.any 首个成功即成功
Promise.allSettled 等待全部完成
串行 .then 链 依次执行
并行独立 各自独立执行
速度:
执行时间线
就绪 · 点击运行开始
  等待中   执行中   成功   失败
常见问题 & 知识点

Promise 有三种状态：Pending（等待中）、Fulfilled（已完成）和Rejected（已拒绝）。状态只能从 Pending 转换到 Fulfilled（通过 resolve）或 Rejected（通过 reject），且一旦转换就不可逆。通过 .then() 或 .catch() 可以返回新的 Promise，从而形成链式调用。

  • Promise.all：所有 Promise 都成功才成功，任意一个失败则整体失败（fail-fast）。
  • Promise.race：返回最先完成（无论成功或失败）的 Promise 的结果。
  • Promise.any：返回第一个成功的 Promise，如果全部失败则抛出 AggregateError。
  • Promise.allSettled：等待所有 Promise 完成（无论成功或失败），返回每个结果的状态数组。

事件循环是 JavaScript 处理异步操作的核心机制。Promise 的回调（.then/.catch）被放入微任务队列（microtask queue），在当前宏任务执行完毕后、下一个宏任务开始前执行。这意味着 Promise 回调的优先级高于 setTimeout 等宏任务。理解事件循环对于掌握异步编程至关重要。

async/await 是 Promise 的语法糖。async 函数始终返回一个 Promise，await 会暂停函数执行直到 Promise 完成。使用 try/catch 可以捕获 await 表达式的错误，相当于 Promise 的 .catch()。async/await 让异步代码看起来像同步代码，大大提升了可读性。

常见错误包括：忘记 return Promise（导致链断裂）、未处理 rejection（可能导致 unhandledRejection）、在循环中错误使用 await（应使用 Promise.all 并行处理）、混淆 Promise.race 和 Promise.any 的语义、以及在不需要时过度使用 new Promise 构造器（应使用 Promise.resolve/reject 或 async 函数）。
🔧 相关工具