Promise用法詳解

一、Promise的基礎用法

Promise是ES6中新增的非同步編程解決方案，是一種封裝回調函數的解決方案。Promise有三個狀態：pending（等待中）、fulfilled（已成功）、rejected（已失敗）。Promise通過執行非同步操作後返回一個promise實例，提供then()、catch()方法用來處理操作成功和失敗後對應的回調函數。

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Promise Resolved"); //操作成功
    }, 2000);
});

promise.then((result) => {
    console.log(result); //列印出"Promise Resolved"
})

以上代碼中定義了一個promise對象，通過setTimeout模擬非同步操作。當非同步操作成功後resolve()方法被調用，將會觸發promise的then()方法調用並輸出「Promise Resolved」。

二、Promise的鏈式調用

Promise也支持鏈式調用，這樣不僅方便傳遞數據，還能保證操作的順序性和可讀性。

const firstPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("First Promise Resolved");
    }, 2000);
});

const secondPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Second Promise Resolved");
    }, 3000);
});

firstPromise.then((result) => {
    console.log(result); //輸出"First Promise Resolved"
    return secondPromise; //返回第二個promise對象
})
.then((result) => {
    console.log(result); //輸出"Second Promise Resolved"
})

以上代碼中，firstPromise和secondPromise分別模擬兩個非同步操作，firstPromise的返回結果往下傳遞到了第二個then()方法中。這樣我們可以輕鬆地通過鏈式調用來操作多個非同步操作。

三、Promise的錯誤處理

在非同步操作中可能會出現錯誤，我們可以通過Promise的catch()方法來處理錯誤。

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject("Promise Rejected"); //操作失敗
    }, 2000);
});

promise.then((result) => {
    console.log(result);
})
.catch((error) => {
    console.log(error); //列印出"Promise Rejected"
})

以上代碼中，模擬非同步操作失敗，會首先調用reject()方法。catch()方法會捕捉到錯誤信息並輸出。

四、Promise.all()用法

Promise.all()方法可以接收一個可迭代的對象（如：數組），並執行多個promise對象。當所有promise都執行成功後返回一個結果數組，其中包含所有promise的返回值。

const firstPromise = Promise.resolve(1);
const secondPromise = Promise.resolve(2);
const thirdPromise = Promise.resolve(3);

Promise.all([firstPromise, secondPromise, thirdPromise])
.then((results) => {
    console.log(results); //輸出[1, 2, 3]
})

以上代碼中，Promise.all()方法接收一個包含3個promise的數組，這些非同步操作同時啟動，緊接著我們通過then()方法獲取返回值。

五、Promise.race()用法

Promise.race()方法和Promise.all()方法不同，Promise.race()的返回值是第一個完成的Promise的返回值。

const firstPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("First Promise Resolved");
    }, 2000);
});

const secondPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Second Promise Resolved");
    }, 3000);
});

Promise.race([firstPromise, secondPromise])
.then((result) => {
    console.log(result); //輸出"First Promise Resolved"
})

以上代碼中，我們同時啟動兩個非同步操作。Promise.race()方法輸出的結果是其中第一個完成的promise操作。

六、Promise.resolve()和Promise.reject()方法

Promise.resolve()和Promise.reject()方法是一種快速創建Promise對象的方式。

//Promise.resolve()方法
Promise.resolve("Promise Resolved")
.then((result) => {
    console.log(result); //輸出"Promise Resolved"
})

//Promise.reject()方法
Promise.reject("Promise Rejected")
.catch((error) => {
    console.log(error); //輸出"Promise Rejected"
})

Promise.resolve()方法會立即執行並返回一個處理成功的promise對象，Promise.reject()方法則立即返回一個處理失敗的promise對象。

七、Promise和async/await的使用

async/await是ES7的新特性，它提供了一種更加簡單、易於讀取的方式來編寫非同步代碼。

function resolveAfter2Seconds() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('resolved');
        }, 2000);
    });
}

async function asyncCall() {
    console.log('calling');
    const result = await resolveAfter2Seconds();
    console.log(result); // 輸出"resolved" 
}

asyncCall();

以上代碼中，resolveAfter2Seconds()方法模擬一個非同步操作，asyncCall()函數中使用了async關鍵字來定義非同步函數。使用await關鍵字，讓非同步操作的執行等待非同步操作的完成，然後將返回值存儲在result變數中。

八、總結

Promise可以幫助我們更加簡單、方便、直觀地管理非同步代碼，通過使用Promise能夠讓我們的代碼變得更加清晰、易於維護和理解。