17370845950

Promise 是 JavaScript 中处理异步操作的标准对象，代表未来完成或失败的结果；具有 pending、fulfilled、rejected 三种不可逆状态；通过 new Promise() 创建，用 .then() 和 .catch() 链式处理，支持 Promise.all() 等静态方法，并与 async/await 协同简化异步流程。

Promise 是 JavaScript 中处理异步操作的标准化对象，它代表一个**尚未完成但未来会完成（或失败）的操作结果**。相比传统的回调函数，Promise 提供了更清晰的链式调用、错误统一捕获和更好的可读性。

Promise 的三种状态

每个 Promise 实例在生命周期中处于以下其中一种状态：

• pending（等待中）：初始状态，既未成功也未失败
• fulfilled（已成功）：操作完成，可通过 .then() 获取返回值
• rejected（已失败）：操作出错，可通过 .catch() 或 .then(null, callback) 捕获错误

状态一旦改变（pending → fulfilled 或 pending → rejected），就不可逆，也不会再变。

创建 Promise：new Promise(执行器函数)

使用 new Promise() 构造函数创建，传入一个立即执行的“执行器函数”，该函数接收两个参数：resolve 和 reject，分别用于标记成功或失败。

例如，模拟一个 1 秒后返回用户数据的异步请求：

const fetchUser = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = Math.random() > 0.2; // 80% 概率成功
    if (success) {
      resolve({ id: 123, name: "张三" });
    } else {
      reject(new Error("网络请求失败"));
    }
  }, 1000);
});

使用 .then() 和 .catch() 处理结果

Promise 实例通过 .then() 接收成功结果，通过 .catch() 统一捕获错误（推荐写法）：

fetchUser
  .then(user => {
    console.log("获取用户成功：", user.name);
    return user.id; // 可返回新值，供下一个 .then 使用
  })
  .then(id => {
    console.log("用户ID是：", id);
  })
  .catch(err => {
    console.error("出错了：", err.message);
  });

注意：.then() 中返回普通值会自动包装成 resolved Promise；返回另一个 Promise，则会等待它完成后再继续链式执行（即“扁平化”链式调用）。

常用静态方法：Promise.all()、Promise.race()、Promise.resolve/reject

• Promise.all([p1, p2, ...])：全部成功才 resolve，任一失败则立即 reject，返回数组结果（按顺序）
• Promise.race([p1, p2, ...])：哪个 Promise 最先改变状态（无论成功/失败），就以它的结果为准
• Promise.resolve(value)：快速创建一个已成功的 Promise（如 Promise.resolve(42)）
• Promise.reject(reason)：快速创建一个已失败的 Promise

例如并行加载多个资源：

Promise.all([
  fetch('/api/user'),
  fetch('/api/posts'),
  fetch('/api/profile')
])
.then(responses => Promise.all(responses.map(r => r.json())))
.then(([user, posts, profile]) => {
  console.log({ user, posts, profile });
})
.catch(err => console.error("任一请求失败：", err));

与 async/await 配合更简洁

ES2017 起，async/await 是 Promise 的语法糖，让异步代码看起来像同步：

async function loadUserData() {
  try {
    const res = await fetch('/api/user');
    const user = await res.json();
    console.log("用户：", user);
  } catch (err) {
    console.error("加载失败：", err);
  }
}

注意：async 函数内部 await 后面必须是 Promise（或 thenable 对象），且整个函数返回一个 Promise。