qian
在現代網頁應用程式開發中，承諾（Promise）是一個非常重要的概念，它能夠簡化異步程式的編寫過程，並且提供了一種更為流暢的處理方式。雖然承諾的概念可能對初學者來說有些難以理解，但透過這篇文章，我們將逐步探索承諾的基礎知識以及如何在實際的JavaScript程式碼中運用它們，讓您輕鬆駕馭這個強大的功能。
首先，什麼是承諾呢？簡單來說，承諾是一種物件，它在未來會有一個值或一個錯誤訊息。當程式碼需要等待某個任務完成時，可以使用承諾來管理這些不確定的結果。通常，使用承諾可以避免瀏覽器的事件循環中的許多潛在問題，並使得程式更加可讀且易於維護。
承諾有三種基本狀態：未解決（pending）、已解決（fulfilled）和被拒絕（rejected）。當一個承諾處於未解決狀態時，表示它的值尚未決定；如果任務成功執行完畢，則該承諾被視為已解決，並且擁有成功的值；相反地，如果任務失敗，那麼承諾就被拒絕，並且包含失敗的原因資訊。
現在，讓我們看看如何創建和使用承諾。以下是如何定義一個最基本的承諾範例：
const promise = new Promise((resolve, reject) => {
// 做一些耗時的操作...
if (條件滿足) {
resolve('操作成功'); // 任務成功時呼叫 resolve()
} else {
reject('操作失敗'); // 任務失敗時呼叫 reject()
}
});
在上述程式碼中，`new Promise()` 的第一個參數是一個函式，稱為「回呼」（executor）。這個函式接受兩個參考函式 `resolve` 和 `reject`，其中 `resolve` 在任務成功後被調用，而 `reject` 在任務失敗後被調用。
一旦承諾被創建，你可以使用 `then()` 方法來指定接下來要做的事情，無論它是被解決還是被拒絕。`then()` 方法接受兩個選填的函式參數：第一個函式是在承諾被解決時調用的，第二個函式是在承諾被拒絕時調用。下面是如何使用 `promise` 的範例：
promise.then(
value => console.log(`操作成功: ${value}`), // 如果承諾被解決，輸出成功訊息
error => console.error(`操作失敗: ${error}`) // 如果承諾被拒絕，輸出錯誤訊息
);
在這個例子中，如果在 `resolve()` 內部指定的值（例如 ‘操作成功’）被傳遞給第一個函式參數，那麼控制檯就會顯示 “操作成功: 操作成功”。同樣地，如果在 `reject()` 內部指定的值（例如 ‘操作失敗’）被傳遞給第二個函式參數，那麼控制檯將會顯示 “操作失敗: 操作失敗”。
承諾還允許串聯和連結，這意味著您可以將多個承諾連接到一起，形成一個依賴鏈。這種能力對於構建複雜的異步流程非常有幫助。例如，如果您有兩個互相依賴的任務 A 和 B，您可以這樣做：
function taskA() {
return new Promise((resolve, reject) => {
// 執行任務 A 的邏輯
setTimeout(() => resolve('Task A done'), 1000);
});
}
function taskB(resultFromA) {
console.log(`Starting Task B with result: ${resultFromA}`);
return new Promise((resolve, reject) => {
// 執行任務 B 的邏輯
setTimeout(() => resolve('Task B done'), 500);
});
}
taskA()
.then(resultA => taskB(resultA)) // 這裡 taskB 接收 taskA 的結果作為參數
.then(resultAB => console.log(`Both tasks are completed: ${resultAB}`));
在上面的程式碼中，當 `taskA` 完成後，其結果會被傳遞到 `taskB` 中。然後 `taskB` 的結果又被傳遞到最後的 `console.log` 中，從而在控制檯中打印出 “Both tasks are completed: Task B done”。
總之，承諾是 JavaScript 中一種非常實用且強大的工具，特別適合於處理異步程式設計的工作。透過學習和使用承諾，您可以在您的程式中實現更清晰、更高效、更容易維護的代碼結構。希望本指南能夠幫助您更好地理解和掌握承諾的概念及用法！
