Promise代码理解

原创已于 2025-06-13 17:39:29 修改 · 439 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-13 17:35:45 首次发布

console.log(1);
new Promise(resolve => {
  console.log(2);
  resolve();
  console.log(3);
}).then(() => console.log(4));
console.log(5);

输出顺序：1，2，3，5，4

同步代码优先执行：

先执行 console.log(1) → 输出 1
遇到 new Promise，执行构造函数里的同步代码：console.log(2) → 输出 2；resolve() 标记 Promise 为已完成，但不影响当前同步流程；接着 console.log(3) → 输出 3
继续执行同步代码 console.log(5) → 输出 5

微任务队列执行：

同步代码执行完后，检查微任务队列（Promise 的 then 回调属于微任务），执行 then 里的 console.log(4) → 输出 4

先同步再异步，微任务高于宏任务！

console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);

输出顺序：1, 4, 3, 2

同步代码阶段：

微任务执行阶段：

宏任务执行阶段：

先同步再异步，微任务高于宏任务！

Promise.reject("error")
  .then(() => console.log("success"))
  .catch(err => console.log(err));

执行流程拆解：

Promise.reject("error") 直接生成一个已拒绝的 Promise
链式调用的 then 回调：因为 Promise 状态是 “拒绝”，then 里的成功回调（() => console.log("success")）会被跳过
后续的 catch 会捕获到前面传递的错误（"error"），执行 console.log(err) → 输出 error

catch兜底，then分流！(catch 主打 “兜底捕获未处理错误”，then 负责 “成功 / 失败的流程分流)