JavaScript Promise

一、Promise是什麼

Promise是JavaScript中的一種異步編程解決方案，它是一個容器，存放着某個未來才會結束的事件的結果。它使得異步操作更加容易管理和理解。

Promise擁有三個狀態：

• pending（進行中）：初始狀態。
• fulfilled（已成功）：表示操作成功完成，Promise對象中的回調函數會被異步調用並返回相應的結果。
• rejected（已失敗）：表示操作失敗，Promise對象中的回調函數會被異步調用並返回相應的錯誤信息。

二、創建Promise實例

要創建一個Promise實例，可以使用Promise構造函數。

const promise = new Promise((resolve, reject) => {
    // 異步操作
    if (異步操作成功) {
        resolve(成功的返回值);
    } else {
        reject(失敗的返回值);
    }
});

Promise構造函數接受一個函數參數，該函數參數需要兩個函數類型參數resolve和reject。resolve表示異步操作成功，reject表示異步操作失敗。

三、Promise示例代碼

1、基礎示例代碼

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Hello, Promise!');
    }, 1000);
});

promise.then((value) => {
    console.log(value); // 'Hello, Promise!'
});

上面的代碼中，setTimeout函數模擬了一個異步操作，1秒後會返回一個成功的響應。Promise實例中resolve會返回字符串’Hello, Promise!’，接着會調用promise.then()方法並傳遞一個回調函數，用於處理異步操作成功後返回的數據。

2、使用Promise.all()同時處理多個Promise實例

const promise1 = new Promise(resolve => setTimeout(() => resolve('Promise 1'), 2000));
const promise2 = new Promise(resolve => setTimeout(() => resolve('Promise 2'), 1000));

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

在上面的代碼中，Promise.all()方法可以接收一個包含Promise實例的數組作為參數，在所有的Promise實例狀態都變為fulfilled後，Promise.all()方法才會異步返回一個包含所有返回值的數組。

3、Promise的鏈式調用

const firstMethod = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('First Method completed');
            resolve({ firstData: 'First Method Response' });
        }, 2000);
    });
};

const secondMethod = (firstResult) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('Second Method completed');
            resolve({ ...firstResult, secondData: 'Second Method Response' });
        }, 2000);
    });
};

firstMethod()
    .then(secondMethod)
    .then((result) => {
        console.log(result); // { firstData: 'First Method Response', secondData: 'Second Method Response' }
    });

在上面的代碼中，firstMethod和secondMethod分別返回一個Promise實例，firstMethod在2秒後返回一個帶有firstData屬性的對象，secondMethod接收firstMethod的返回值作為參數，並在2秒後返回一個包含firstData和secondData的對象，然後可以通過Promise.then()方法鏈式調用兩個方法，並在最後一個方法中打印出完整的結果。

四、Promise總結

Promise為異步編程提供了一種高效而可靠的解決方案，它可以解決回調函數嵌套的問題，使異步邏輯更加清晰明了。同時，Promise還提供了一系列強大的方法，例如Promise.all()和Promise.race()，讓我們能夠更容易地處理多個異步操作。使用Promise雖然相對來說較為複雜，但一定程度上可以提高代碼的可讀性和維護性。