JS Promise 详解

深入理解 Promise 三种状态 · 难度：高级 · +15XP

JS Promise 详解

JavaScript Promise 详解 — 异步编程的基石

学习前的准备

打开浏览器控制台（按 F12）。你需要了解 JavaScript 的基本语法和函数的基础知识。本教程会从零开始讲解 Promise。

什么是 Promise？为什么需要它？

在 JavaScript 中，很多操作是异步的——比如从服务器获取数据、读取文件、设置定时器。在 Promise 出现之前，我们使用回调函数来处理异步操作的结果。但回调函数会导致代码嵌套太深，难以阅读和维护。Promise 就是为了解决这个问题而生的。一个 Promise 代表一个异步操作的最终结果。它就像一个“承诺”：我现在还不能给你结果，但我保证，当操作完成后，我一定会告诉你——要么成功了（resolved），要么失败了（rejected）。

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve('数据获取成功！');
    } else {
      reject(new Error('网络错误'));
    }
  }, 2000);
});

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

Promise 提供了 .then() 方法来处理成功的结果，.catch() 方法来处理失败的情况。.then() 还可以链式调用。

myPromise
  .then(result => console.log('成功：', result))
  .catch(error => console.error('失败：', error.message))
  .finally(() => console.log('无论成败，finally 都会执行'));
function fetchUser(id) {
  return new Promise(resolve => {
    setTimeout(() => resolve({ id, name: '用户' + id }), 1000);
  });
}
fetchUser(1)
  .then(user => {
    console.log('获取到用户', user.name);
    return fetchUser(user.id + 1);
  })
  .then(nextUser => console.log('第二个用户', nextUser.name));

Promise 的三种状态

状态	说明
pending（等待中）	初始状态，操作尚未完成
fulfilled（已成功）	操作成功完成
rejected（已失败）	操作失败

Promise 的状态一旦从 pending 变为 fulfilled 或 rejected，就不可再改变。

Promise 的并发控制

const p1 = fetchUser(1);
const p2 = fetchUser(2);
const p3 = fetchUser(3);
// Promise.all：所有都成功才算成功
Promise.all([p1, p2, p3]).then(users => console.log('全部完成：', users));
// Promise.race：第一个完成就返回
Promise.race([p1, p2, p3]).then(first => console.log('最快的是：', first));
// Promise.allSettled：等全部完成，不管成功失败
Promise.allSettled([p1, p2, p3]).then(results => {
  results.forEach(r => console.log(r.status));
});

小结

Promise 是 JavaScript 异步编程的核心概念。创建 Promise 使用 new Promise((resolve, reject) => {...})；处理结果使用 .then() 和 .catch()；链式调用让异步操作按顺序执行；Promise.all() 等静态方法用于并发控制。理解了 Promise，你就为学习 async/await 打下了坚实的基础。