深入理解 Promise 状态

一、Pending 状态

Pending 状态是 Promise 对象在“等待中”的状态，意味着传入 Promise 构造函数中的异步操作还没有完成。下面是一个示例：

    const promise = new Promise((resolve, reject) => {
        console.log('Promise is pending');
        setTimeout(() => {
            resolve('Promise is resolved');
        }, 3000);
    });

在上述代码中，Promise 对象被创建并传入了一个异步操作，在 setTimeout 函数内部执行 resolve() 方法表示异步操作已经完成。在这种情况下，Promise 的状态为 Pending。

当状态为 Pending 时，Promise 对象可以将状态变成它的任意一个终态，即 Fulfilled 或 Rejected 状态。

二、Fulfilled 状态

Fulfilled 状态表示异步操作成功。当 Promise 状态变成 Fulfilled 时，Promise 对象会执行 .then() 回调函数中的内容。下面是一个示例：

    const promise = new Promise((resolve, reject) => {
        console.log('Promise is pending');
        setTimeout(() => {
            resolve('Promise is resolved');
        }, 3000);
    });

    promise.then((value) => {
        console.log(value);
    });

在上述代码中，Promise 对象的异步操作成功并执行了 resolve() 方法。因此，Promise 对象状态变为了 Fulfilled 状态，并且异步操作结果作为参数传递给了 .then() 回调函数。在这种情况下，.then() 回调函数输出 “Promise is resolved”。

需要注意的是，Promise 对象只能变成 Fulfilled 或者 Rejected 状态中的一个。如果 Promise 对象的异步操作同时满足 Fulfilled 和 Rejected 状态，那么 Promise 对象将会失败，即 Rejected 状态。

三、Rejected 状态

Rejected 状态表示异步操作失败。当 Promise 状态变成 Rejected 时，Promise 对象会执行 .catch() 回调函数中的内容。下面是一个示例：

    const promise = new Promise((resolve, reject) => {
        console.log('Promise is pending');
        setTimeout(() => {
            reject('Promise is rejected');
        }, 3000);
    });

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

在上述代码中，Promise 对象的异步操作失败并执行了 reject() 方法。因此，Promise 对象状态变为了 Rejected 状态，并且异步操作结果作为参数传递给了 .catch() 回调函数。在这种情况下，.catch() 回调函数输出 “Promise is rejected”。

需要注意的是，同样地，Promise 对象在 Reject 状态下也无法变成其他状态。

四、状态改变的流程

Promise 对象的状态变化是一个单向性的过程，即状态只能从 Pending 转变为 Fulfilled 或 Rejected。在下面的示例中，定义了两个 Promise 对象，promise1 和 promise2：

    const promise1 = new Promise((resolve, reject) => {
        console.log('Promise 1 is pending');
        setTimeout(() => {
            resolve('Promise 1 is resolved');
        }, 3000);
    });

    const promise2 = new Promise((resolve, reject) => {
        console.log('Promise 2 is pending');
        setTimeout(() => {
            reject('Promise 2 is rejected');
        }, 1000);
    });

    promise1
        .then((value) => {
            console.log(value);
            return promise2;
        })
        .catch((error) => {
            console.log(error);
        })
        .then((value) => {
            console.log(value);
        }, (error) => {
            console.log(error);
        });

在上述代码中，promise1 和 promise2 分别表示异步操作成功和失败的情况。promise1 的异步操作成功，promise2 的异步操作失败。在 promise1 的 .then() 回调函数中，将 promise2 传递给了 .catch() 回调函数，并继续返回一个全新的 Promise 对象。在这里，promise2 的状态已经为 Rejected，因此会执行 .catch() 回调函数。在 .then() 回调函数的第二个参数和 .catch() 回调函数中，均可以接收到 promise2 的结果。在这种情况下，输出结果为 “Promise 1 is resolved” 和 “Promise 2 is rejected”。

五、Promise.all()

Promise.all() 方法接收一个由 Promise 对象组成的数组作为参数，并将其包装成一个新的 Promise 对象。这个方法返回的 Promise 对象只有一个 then() 方法。在参数中的所有 Promise 对象均成功后，返回该对象的结果数组。

下面是一个使用 Promise.all() 方法的示例：

    const promise1 = new Promise((resolve, reject) => {
        console.log('Promise 1 is pending');
        setTimeout(() => {
            resolve('Promise 1 is resolved');
        }, 3000);
    });

    const promise2 = new Promise((resolve, reject) => {
        console.log('Promise 2 is pending');
        setTimeout(() => {
            resolve('Promise 2 is resolved');
        }, 1000);
    });

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

在上述代码中，Promise.all() 方法接收 promise1 和 promise2 两个 Promise 对象组成的数组，并通过 .then() 回调函数输出结果数组 [“Promise 1 is resolved”, “Promise 2 is resolved”]。需要注意的是，只要有一个 Promise 对象的状态为 Rejected，Promise.all() 方法返回的 Promise 对象即为 Rejected 状态。