面向初学者的 JavaScript Promise 解释

Source: Dev.to

🧠 Promise 解决了什么问题？

在 Promise 之前，我们使用 回调函数 来处理异步任务：

fetchData(function (data) {
  processData(data, function (result) {
    console.log(result);
  });
});

❌ 回调地狱 → 难以阅读，难以维护

Promise 就像一个占位符，用于表示可能尚未可用的值。

⏳ Promise 状态

Promise 可以处于 三种状态：

1. Pending（待定） – 初始状态，等待结果
2. Fulfilled（已完成） – 操作成功，值可用
3. Rejected（已拒绝） – 操作失败，错误可用

Pending → Fulfilled or Rejected

⚙️ 基本 Promise 生命周期

const promise = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Task completed");
  } else {
    reject("Task failed");
  }
});

promise
  .then(result => console.log(result)) // handles success
  .catch(error => console.log(error)); // handles failure

当 success = true 时的输出

Task completed

当 success = false 时的输出

Task failed

🔄 Promise 链式调用

Promise 可以链式调用，以 顺序 运行多个异步任务：

fetchData()
  .then(data => processData(data))
  .then(result => console.log(result))
  .catch(err => console.error(err));

• 比嵌套回调更简洁
• 更易阅读和维护

📊 回调 vs Promise

🛠️ 实际案例

function fetchUser(userId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (userId === 1) {
        resolve({ id: 1, name: "Rahul" });
      } else {
        reject("User not found");
      }
    }, 1000);
  });
}

fetchUser(1)
  .then(user => console.log(user.name)) // Rahul
  .catch(err => console.log(err));

🧩 可视化 Promise 生命周期

Promise created → pending
       ↓
(resolve) fulfilled → .then runs
(reject)  rejected → .catch runs

🧠 关键要点

• Promise 代表未来的一个值。
• 它们防止回调地狱。
• .then() 处理成功，.catch() 处理错误。
• Promise 可以链式用于顺序的异步操作。

🚀 最后思考

Promise 是现代异步 JavaScript 的基础。一旦掌握它们，你就可以准备好：

• async/await 语法
• 复杂的异步工作流
• 干净、可读、可维护的代码