深入理解 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 狀態。