【JavaScript】JavaScript Promises實踐指南
你了解JavaScript中的Promises嗎？這是一個很多人一開始就放棄的主題，但我會盡量讓它變得盡可能簡單。
1. “Promise”到底是什么？
“Promise”是異步編程中的一個基本概念，特別是在JavaScript和許多現代編程語言中。它代表一個可能尚未可用但將在未來某個時刻解決的值（或操作的結果）， either successfully with a value or unsuccessfully with an error.
2. Promise的狀態：
在JavaScript中，Promise可以處于以下三種狀態之一：
- Pending（進行中）： 這是Promise創建時的初始狀態。它表示由Promise代表的異步操作尚未完成，結果（履行或拒絕）不可用。Promises從這種狀態開始，然后過渡到其他狀態之一。
- Fulfilled（履行）： 這個狀態表示異步操作成功完成。當Promise過渡到履行狀態時，意味著操作已成功完成，結果（值或數據）可用。您可以使用
.then()方法訪問解決的值。 - Rejected（拒絕）： 這個狀態表示異步操作失敗。當Promise過渡到拒絕狀態時，意味著操作過程中發生了錯誤或異常。您可以使用
.catch()方法或.then()方法的第二個參數訪問拒絕的原因（錯誤對象或消息）并處理它。
以下是Promise狀態和轉換的直觀表示：
初始狀態： 進行中/ \
履行狀態： 履行 拒絕（結果可用） （發生錯誤）Promises的設計旨在提供一種結構化的方式來處理異步操作，允許您分別處理成功和失敗情況。您可以使用.then()指定Promise履行時要做的事情，使用.catch()處理Promise拒絕時的錯誤。這使異步代碼比基于回調的方法更易于管理和閱讀。
3. 如何構建一個Promise
在JavaScript中構建Promise，可以使用Promise構造函數，它接受一個單一函數作為參數。這個函數被稱為執行器函數，它有兩個參數：resolve和reject。resolve函數用于用值履行Promise，reject函數用于用錯誤拒絕Promise。
以下是創建Promise的基本結構：
const myPromise = new Promise((resolve, reject) => {// 異步或耗時操作在這里進行// 通常，您會執行一些異步任務，比如獲取數據或讀取文件// 如果操作成功，調用resolve并傳入結果// resolve(result);// 如果發生錯誤，調用reject并傳入錯誤對象或消息// reject(error);
});以下是一個更具體的示例，使用setTimeout模擬延遲的異步操作，并在一定時間后解決Promise：
const delay = (milliseconds) => {return new Promise((resolve, reject) => {setTimeout(() => {resolve(`在${milliseconds}毫秒后解決`);}, milliseconds);});
};// 使用：
delay(2000) // 等待2秒.then((result) => {console.log(result); // 在2000毫秒后解決}).catch((error) => {console.error(error);});在這個示例中：
- 我們定義了一個返回Promise的函數
delay。在Promise構造函數內部，我們使用setTimeout模擬異步延遲。 - 如果異步操作成功（即
setTimeout完成），我們調用resolve并傳入結果。 - 如果操作過程中發生錯誤，我們可以調用
reject并傳入錯誤對象或消息。 - 我們使用
.then()指定Promise履行（解決）時要做的事情，使用.catch()處理可能發生的任何錯誤。
這是一個簡單的示例，但在實踐中，您會用真實的異步操作（如發起API請求或讀取文件）替換setTimeout。Promises提供了一種結構化的方式來處理異步代碼，使其更易于閱讀和維護。
3.1. Promise解決時返回值
在JavaScript Promises中，您可以通過在Promise的執行器函數內將解決的值作為參數提供給resolve函數來在Promise解決時返回值。以下是操作方法：
const myPromise = new Promise((resolve, reject) => {// 模擬成功的異步操作setTimeout(() => {const result = '這是解決的值';resolve(result); // 用結果解決Promise}, 2000);
});// 使用Promise來訪問解決的值
myPromise.then((result) => {console.log('解決:', result); // 解決: 這是解決的值}).catch((error) => {console.error('錯誤:', error);});在這個例子中：
- 在Promise的執行器函數內部，我們使用
setTimeout模擬異步操作。 - 當異步操作成功完成時，我們調用
resolve(result)并傳入期望的解決值（在這個例子中是'這是解決的值'）。 - 當你使用
.then()來處理Promise的解決時，解決的值作為參數傳遞給回調函數。你可以在那個回調函數內訪問和使用解決的值。
result變量包含解決的值，你可以在.then()回調中根據需要使用它。
這種模式允許你以結構化和清晰的方式處理異步操作的結果。解決的值可以是任何數據類型，包括字符串、數字、對象，甚至是其他Promise。
3.2. Promise被拒絕時返回錯誤
在JavaScript Promises中，你可以通過在Promise的執行器函數內將錯誤消息或錯誤對象作為參數提供給reject函數來在Promise被拒絕時返回錯誤。以下是操作方法：
const myPromise = new Promise((resolve, reject) => {// 模擬失敗的異步操作setTimeout(() => {const errorMessage = '這是錯誤消息';reject(errorMessage); // 用錯誤消息拒絕Promise}, 2000);
});// 使用Promise來處理拒絕和錯誤
myPromise.then((result) => {console.log('解決:', result);}).catch((error) => {console.error('錯誤:', error); // 錯誤: 這是錯誤消息});在這個例子中：
- 在Promise的執行器函數內部，我們使用
setTimeout模擬失敗的異步操作。 - 當異步操作遇到錯誤時，我們調用
reject(errorMessage)并傳入期望的錯誤消息（在這個例子中是'這是錯誤消息'）。 - 當你使用
.catch()來處理Promise的拒絕時，拒絕的錯誤作為參數傳遞給回調函數。你可以在那個回調函數內訪問和使用錯誤消息或錯誤對象。
error變量包含拒絕的錯誤，你可以根據需要處理和記錄它，或執行任何其他錯誤處理任務。
這種模式允許你使用Promises優雅地處理可能在異步操作中發生的錯誤。拒絕的值可以是錯誤消息字符串、錯誤對象，或任何代表拒絕原因的其他值。
)