一文看懂 Promise：异步任务的“执行流程控制器”

在 JavaScript 中，我们经常需要处理一些耗时操作，比如网络请求、定时任务。这些操作不能阻塞主线程，所以要用异步方式处理。

而 Promise 就是 ES6 提供的一个用来管理异步任务的工具类，它能让异步代码写得更清晰、更容易理解。

今天我们就用几行代码 + 一张图，彻底搞懂 Promise 是怎么工作的。

---

一、Promise 是什么？

✅ Promise 是一个"承诺"对象，表示一个异步操作最终会完成（成功或失败）。

你可以把它想象成一个"快递单"：

• 发出订单 → 等待配送
• 配送成功 → 收到货（resolve）
• 配送失败 → 通知你（reject）

const p = new Promise((resolve, reject) => {
  // 执行异步任务
  setTimeout(() => {
    console.log(2);
    resolve(); // 成功了，通知后续代码
  }, 3000);
});

📌 注意：new Promise() 接受一个函数作为参数，这个函数里执行异步任务。

---

二、如何监听结果？.then() 和 .catch()

Promise 提供了两个方法来处理结果：

1. .then() ------ 成功时执行

p.then(() => {
  console.log(3); // 3 秒后执行
});

✅ 当 resolve() 被调用时，.then() 里的函数就会执行。

2. .catch() ------ 失败时执行

p.catch(() => {
  console.log('出错了');
});

✅ 如果调用了 reject()，就会触发 .catch()。

---

三、实际例子：异步任务顺序执行

我们来看一段完整的代码：

console.log(1);

const p = new Promise((resolve) => {
  setTimeout(() => {
    console.log(2);
    resolve();
  }, 3000);
});

p.then(() => {
  console.log(3);
});

console.log(4);

输出结果：

1
4
2
3

🔍 分析：

• console.log(1) → 立即执行
• console.log(4) → 紧接着执行（在 Promise 创建后）
• setTimeout → 3 秒后执行 console.log(2)
• resolve() → 触发 .then()，执行 console.log(3)
  ✅ 这就是为什么说：Promise 让异步任务看起来像同步一样写！

---

四、链式调用：多个异步任务按顺序执行

很多时候我们需要连续执行多个异步操作，比如：

1. 获取用户数据
2. 根据用户 ID 获取帖子
3. 显示结果

使用 Promise 可以这样写：

fetchUserData()
  .then(user => {
    return getUserPosts(user.id); // 返回新的 Promise
  })
  .then(posts => {
    console.log('用户的帖子:', posts);
  })
  .catch(err => {
    console.error('出错了:', err);
  });

✅ 这样写逻辑清晰，避免了嵌套过深的问题。

---

五、总结：Promise 的三大要点

要点	说明
new Promise()	创建一个承诺，传入异步任务函数
resolve()	异步任务成功，触发 .then()
reject()	异步任务失败，触发 .catch()

💡 关键理解：
Promise 本身是异步的，但它通过链式调用的方式，让异步代码看起来像同步一样写。

---

写在最后

如果你正在学习 JavaScript 异步编程，Promise 是必须掌握的基础。它虽然简单，但非常强大。

📌 推荐练习：

• 自己写一个 Promise 模拟加载图片
• 用 .then() 实现两个接口的连续调用