彻底理解 Promise 的三种状态-JavaScript中文网-JavaScript教程资源分享门户

Promise 是处理异步任务时非常常见的一种技术，通过 Promise 能够更好地组织异步代码，提升代码可读性和可维护性。Promise 可以处于三种状态：Pending（等待中）、Fulfilled（成功）和Rejected（失败），其中的状态转换是非常重要的。本文将详细介绍 Promise 的三种状态，以及状态转换的相关知识，帮助大家更好地理解 Promise 的机制。

Promise 状态

1. Pending 状态

当一个 Promise 实例被创建时，它首先处于 Pending 状态。这就意味着该 Promise 实例既不是 Fulfilled 也不是 Rejected。此时，Promise 实例尚未成功或失败，而是在等待异步操作的结果。

下面是一个例子，此时的 Promise 实例就处于 Pending 状态：

const promise = new Promise((resolve, reject) => {
  // 等待异步操作完成
});

2. Fulfilled 状态

当 Promise 实例成功完成异步任务并返回结果时，它就进入了 Fulfilled 状态。在 Fulfilled 状态下，Promise 实例可以提供异步操作返回的结果。

下面是一个例子，此时的 Promise 实例就处于 Fulfilled 状态：

const promise = new Promise((resolve, reject) => {
  resolve("success");
});

promise.then(result => {
  console.log(result); // success
});

3. Rejected 状态

当 Promise 实例在异步任务期间发生错误时，它就进入了 Rejected 状态。在 Rejected 状态下，Promise 实例可以提供异步操作返回的错误信息。

下面是一个例子，此时的 Promise 实例就处于 Rejected 状态：

const promise = new Promise((resolve, reject) => {
  reject("error");
});

promise.catch(error => {
  console.log(error); // error
});

状态转换

Promise 实例会在 Pending、Fulfilled 和 Rejected 状态之间进行状态转换。Promise 能够接受两个参数，resolve 和 reject，它们分别表示异步操作成功和失败。当异步操作成功时，Promise 将从 Pending 转变为 Fulfilled；而在异步操作失败时，Promise 将从 Pending 转变为 Rejected。

下面是一个例子，我们使用 setTimeout 模拟异步操作：

// www.javascriptcn.com code example
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    // 模拟异步操作，当时间结束后将会进入 Fulfilled 状态
    resolve("success!");
  }, 1000);
});

promise.then(result => {
  console.log(result); // success!
});

promise.catch(error => {
  console.log(error);
  // 在这个例子中，Promise 不会进入 Rejected 状态，不会运行到这里
});

在这个例子中，我们使用 setTimeout 模拟一个异步操作，并在 1 秒后使用 resolve 将 Promise 实例从 Pending 转变为 Fulfilled 状态。在这之后，我们的 then 方法就会触发并输出 success！

如果异步操作出现异常，则会进入 Rejected 状态：

// www.javascriptcn.com code example
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    // 模拟异步操作出错，将会进入 Rejected 状态
    reject(new Error("An error occurred!"));
  }, 1000);
});

promise.then(result => {
  console.log(result);
  // 在这个例子中，Promise 不会进入 Fulfilled 状态，不会运行到这里
});

promise.catch(error => {
  console.log(error.message); // An error occurred!
});

在这个例子中，我们使用 reject 将 Promise 实例从 Pending 转变为 Rejected 状态。在这之后，我们的 catch 方法就会触发并输出错误信息 An error occurred!。

Promise.all 和 Promise.race

Promise.all 返回一个 Promise 实例，该 Promise 实例在数组中的所有 Promise 都变为 Fulfilled 后变为 Fulfilled。如果数组中的一个 Promise 进入 Rejected 状态，则 Promise.all 返回的 Promise 也会进入 Rejected 状态。下面是一个例子：

// www.javascriptcn.com code example
const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3]).then(values => {
  console.log(values); // [1, 2, 3]
});

const promise4 = Promise.resolve(4);
const promise5 = Promise.reject(new Error("error!"));
const promise6 = Promise.resolve(6);

Promise.all([promise4, promise5, promise6]).catch(error => {
  console.log(error.message); // error!
});

在这个例子中，我们使用 Promise.all 把多个 Promise 实例组合成一个新的 Promise 实例并运行。如果所有的实例都成功，则新的 Promise 实例将进入 Fulfilled 状态并返回所有实例的结果；如果其中任何一个实例进入 Rejected 状态，则新的 Promise 实例也会进入 Rejected 状态并返回错误信息。

而 Promise.race 返回一个 Promise 实例，它在数组中的任何一个 Promise 转换为 Fulfilled 或 Rejected 后便会立即返回相关信息。下面是一个例子：

// www.javascriptcn.com code example
const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, "one");
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "two");
});

Promise.race([promise1, promise2]).then(values => {
  console.log(values); // two
});

在这个例子中，我们使用了 Promise.race 的静态方法，并把 promise1 和 promise2 实例作为参数。在这个例子中，promise2 实例比 promise1 更快，所以 Promise.race 就会返回 promise2 的结果 two。

本文详细讲解了 Promise 的三种状态和状态转换机制，希望能对大家有所帮助。为了更好地使用 Promise 技术，我们需要理解 Promise 的机制以及状态转换过程。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d81617a941bf7134e7321e

彻底理解 Promise 的三种状态