【JavaScript】Promise 的三种状态详解

JavaScript 中的 Promise 是处理异步操作的重要工具，它为异步操作的执行提供了更加清晰和直观的方式。本文将详细介绍 Promise 的三种状态：Pending、Fulfilled 和 Rejected，并结合代码示例，帮助你理解 Promise 的状态转换及其应用场景。

一、Promise 介绍

1. Promise 的基本概念

Promise 是 JavaScript 中用于处理异步操作的对象。通过使用 Promise，开发者可以避免深层嵌套的回调函数（俗称“回调地狱”），从而提高代码的可读性和可维护性。一个 Promise 对象代表一个异步操作，并且它最终会有三种状态之一：

• Pending（进行中）：初始状态，表示异步操作尚未完成，处于等待状态。
• Fulfilled（已完成）：表示异步操作成功完成，并返回结果。
• Rejected（已拒绝）：表示异步操作失败，并返回错误原因。

2. 为什么使用 Promise

传统的异步编程通常使用回调函数来处理，但当多个异步操作嵌套在一起时，代码会变得难以管理。而 Promise 提供了一种更加线性、可预测的方式来处理异步操作，特别是当你需要多个异步操作时，Promise 的链式结构非常有用。

二、Promise 的三种状态详解

1. Pending 状态

Pending 状态是 Promise 的初始状态，当 Promise 被创建时，它默认处于这个状态。此时，异步操作尚未完成，也没有返回任何结果。

示例：

const myPromise = new Promise((resolve, reject) => {
  // 模拟一个异步操作
  setTimeout(() => {
    console.log('异步操作进行中...');
  }, 1000);
});

console.log(myPromise); // 输出：Promise { <pending> }

在上面的代码中，我们创建了一个 Promise，它会等待 1 秒钟执行异步操作。在这 1 秒钟内，Promise 处于 Pending 状态。

2. Fulfilled 状态

当 Promise 的异步操作成功完成后，Promise 的状态会从 Pending 变为 Fulfilled（已完成）。此时，resolve 函数被调用，并返回一个结果。所有基于这个 Promise 的 .then() 方法都会在状态变为 Fulfilled 时被执行。

示例：

const myPromise = new Promise((resolve, reject) => {
  // 模拟异步操作成功
  setTimeout(() => {
    resolve('操作成功！');
  }, 1000);
});

myPromise.then((result) => {
  console.log(result); // 输出：操作成功！
});

在这个例子中，异步操作在 1 秒后成功完成，Promise 状态从 Pending 变为 Fulfilled，并返回结果 '操作成功！'。

3. Rejected 状态

如果 Promise 的异步操作失败，它的状态会从 Pending 变为 Rejected（已拒绝）。此时，reject 函数被调用，并传递一个错误原因。与 .then() 相对，Rejected 状态下的错误处理函数 .catch() 会被执行。

示例：

const myPromise = new Promise((resolve, reject) => {
  // 模拟异步操作失败
  setTimeout(() => {
    reject('操作失败！');
  }, 1000);
});

myPromise
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.log(error); // 输出：操作失败！
  });

在这个例子中，Promise 状态从 Pending 变为 Rejected，并返回错误信息 '操作失败！'。

三、Promise 状态转换过程

1. 状态不可逆

Promise 的状态一旦从 Pending 变为 Fulfilled 或 Rejected，就不可再改变。因此，Promise 状态是单向的：从 Pending 转变为 Fulfilled 或 Rejected。这意味着你无法从一个已完成的 Promise 重新回到 Pending 状态。

2. 状态变化机制

Promise 的状态变化是由 resolve() 或 reject() 函数触发的。在执行异步操作时，根据操作的结果调用这两个函数之一：

• resolve(value)：将 Promise 的状态从 Pending 变为 Fulfilled，并传递结果 value。
• reject(reason)：将 Promise 的状态从 Pending 变为 Rejected，并传递错误原因 reason。

状态转换示意图：

Pending  --->  Fulfilled (resolve)
      \
       \-->  Rejected (reject)

四、Promise 状态的实际应用场景

1. 基本的异步操作

Promise 的最常见应用场景是处理网络请求、文件读写等异步操作。在这些操作中，开发者可以使用 Promise 来明确异步操作的结果，并根据操作成功或失败进行不同的处理。

示例：使用 Promise 模拟网络请求

function fetchData() {
  return new Promise((resolve, reject) => {
    const success = true; // 模拟请求结果

    setTimeout(() => {
      if (success) {
        resolve('数据请求成功！');
      } else {
        reject('数据请求失败！');
      }
    }, 2000);
  });
}

fetchData()
  .then((data) => {
    console.log(data); // 输出：数据请求成功！
  })
  .catch((error) => {
    console.error(error); // 输出：数据请求失败！
  });

2. Promise.all 的应用

在需要并发执行多个异步操作时，Promise.all() 是一个非常有用的工具。它接受一个包含多个 Promise 的数组，当数组中的所有 Promise 都变为 Fulfilled 时，Promise.all() 返回一个新的 Promise，结果是这些 Promise 的返回值组成的数组。如果其中一个 Promise 被 Rejected，则整个 Promise 会立即被 Rejected。

示例：

const promise1 = Promise.resolve(1);
const promise2 = new Promise((resolve) => setTimeout(resolve, 1000, 2));
const promise3 = new Promise((resolve, reject) => setTimeout(reject, 500, '失败'));

Promise.all([promise1, promise2, promise3])
  .then((values) => {
    console.log(values); // 不会被执行
  })
  .catch((error) => {
    console.error(error); // 输出：失败
  });

3. Promise.race 的应用

Promise.race() 用于竞争多个 Promise。它会返回一个新的 Promise，这个 Promise 的状态由第一个变为 Fulfilled 或 Rejected 的 Promise 决定。

示例：

const promiseA = new Promise((resolve) => setTimeout(resolve, 1000, 'A 完成'));
const promiseB = new Promise((resolve) => setTimeout(resolve, 500, 'B 完成'));

Promise.race([promiseA, promiseB]).then((value) => {
  console.log(value); // 输出：B 完成
});

五、总结

Promise 提供了一种简洁有效的方式来处理 JavaScript 中的异步操作，它的三种状态（Pending、Fulfilled 和 Rejected）帮助开发者明确异步任务的当前进展，并提供了优雅的链式结构来处理回调逻辑。理解并熟练使用 Promise 的状态转换是编写高质量异步代码的基础，它能显著提升代码的可读性、可维护性以及错误处理的健壮性。

推荐：

• JavaScript
• react
• vue