17370845950

Promise 是为解决异步流程失控而设计的状态容器，封装 pending/fulfilled/rejected 三种不可逆状态，通过 then/catch 实现线性链式调用与统一错误处理。

Promise 不是语法糖，它是为解决异步流程失控而设计的状态容器。 它不能“消除”回调，但能切断嵌套传递链，把 callback hell 转成可读、可中断、可统一错误处理的线性结构。

Promise 是什么：一个有状态、不可逆的异步值占位符

它不是函数，也不是事件，而是一个对象，内部封装了三种确定状态：pending（等待）、fulfilled（成功）、rejected（失败）。一旦进入后两者，状态就不可再变——这是它可靠性的根基。

关键点：

• new Promise((resolve, reject) => {...}) 构造时必须立即执行 executor 函数，且仅执行一次
• resolve() 和 reject() 只是状态触发器，不返回值；真正传递数据靠的是 then() 或 catch() 的回调参数
• 同一个 Promise 实例多次调用 then()，所有回调都会被加入微任务队列，按注册顺序执行

怎么用 then() 拆掉回调嵌套

典型回调地狱长这样：

getUser(id, (user) => {
  getPosts(user.id, (posts) => {
    getComments(posts[0].id, (comments) => {
      console.log(comments);
    });
  });
});

用 Promise 改写后，嵌套消失，逻辑变平：

getUser(id)
  .then(user => getPosts(user.id))
  .then(posts => getComments(posts[0].id))
  .then(comments => console.log(comments))
  .catch(err => console.error('出错了', err));

注意：

• 每个 then() 返回的是**新 Promise**，不是原 Promise；返回值会自动包装进 Promise.resolve()
• 如果某个 then() 回调里抛错或返回被 reject 的 Promise，后续 then() 会被跳过，直接进最近的 catch()
• then(onFulfilled, onRejected) 的第二个参数不等价于 catch()：它只捕获前一个 Promise 的 rejection，不捕获自身回调里的错误

为什么 catch() 不能放在中间，必须放末尾

这是 Promise 链最常踩的坑。看这个例子：

fetch('/api/user')
  .then(res => res.json())
  .catch(err => console.warn('请求失败', err))
  .then(data => {
    // 即使上面 catch 了，这里仍会执行！
    return fetch(`/api/posts/${data.id}`);
  })
  .catch(err => console.error('二次请求也挂了', err));

问题在于：catch() 本身返回一个 fulfilled 状态的新 Promise，所以链不会中断。真正要中断流程并避免后续执行，得把 catch() 放在最后，或在中间 catch() 里手动抛错：

• ✅ 推荐：统一末尾 catch()，保持链清晰
• ⚠️ 若需局部容错，可在 catch() 中返回一个默认值（如 return { id: -1 }），让链继续；但别忘了这会掩盖真实异常
• ❌ 避免在 catch() 后还接 then() 并假设数据一定存在

async/await 是语法糖，但改变了错误处理直觉

async/await 让 Promise 链看起来像同步代码，但底层仍是 Promise 微任务调度。它真正改变的是错误捕获方式：

async function loadUserWithPosts() {
  try {
    const user = await fetch('/api/user').then(r => r.json());
    const posts = await fetch(`/api/posts/${user.id}`).then(r => r.json());
    return { user, posts };
  } catch (err) {
    // 所有 await 失败都会进这里，包括网络错误、JSON 解析失败、undefined.id 报错
    console.error('加载失败', err);
  }
}

注意：

• await 只解包 fulfilled 值；rejected 会直接抛出，必须用 try/catch 捕获
• 不能用 catch() 方法捕获 await 错误，必须用语句级异常处理
• await Promise.all([p1, p2]) 中任一 Promise rejected，整个 all 就 reject；如需全部结果，改用 Promise.allSettled()

最易忽略的一点：Promise 的状态切换发生在当前宏任务结束之后，哪怕你 resolve(1) 写在同步代码最开头，then() 里的回调也一定在下一轮微任务执行——这不是延迟，是 JS 事件循环的硬约束。