2.1 創建 Promises
Promises（承諾）是表示非同步操作成功或失敗及其結果的對象。 它們在 ES6（ECMAScript 2015）中引入，並成為在 JavaScript 中處理非同步代碼的標準方式。
基本概念
Promise 可以處於三種狀態之一：
- Pending（待定）：初始狀態，既沒有成功也沒有拒絕。
- Fulfilled（成功）：操作成功完成。
- Rejected（拒絕）：操作失敗。
創建 Promise
使用 Promise 構造函數創建 Promise，它接受一個執行函數（executor function）。
該函數接受兩個參數：resolve 和 reject。
在該函數內執行非同步代碼，成功時調用 resolve，失敗時調用 reject。
語法：
const promise = new Promise((resolve, reject) => {
// 非同步操作
if (/* 成功完成 */) {
resolve(value); // 成功
} else {
reject(error); // 錯誤
}
});
創建 Promise 的示例：
JavaScript
const myPromise = new Promise((resolve, reject) => {
const success = true; // 成功執行的條件
if (success) {
resolve('Operation was successful');
} else {
reject('Operation failed');
}
});
2.2 使用 Promises
方法 then
方法 then 用於處理 Promise 成功完成。它接受兩個函數：一個處理成功完成，另一個處理錯誤。然而，通常用方法 catch 來處理錯誤。
then 的使用示例：
JavaScript
myPromise.then(
(successMessage) => {
console.log(successMessage); // 顯示：Operation was successful
},
(errorMessage) => {
console.error(errorMessage); // 在錯誤情況下調用
}
);
方法 catch
方法 catch 用於處理 Promise 的錯誤。它接受一個函數，該函數在 Promise 被拒絕時調用。
catch 的使用示例：
JavaScript
myPromise
.then((successMessage) => {
console.log(successMessage);
})
.catch((errorMessage) => {
console.error(errorMessage); // 調用：Operation failed
});
方法 finally
方法 finally 用於無論 Promise 結果如何（成功或失敗）都會執行的代碼。
它不接受參數，並在 Promise 完成或拒絕後執行。
finally 的使用示例：
JavaScript
myPromise
.then((successMessage) => {
console.log(successMessage);
})
.catch((errorMessage) => {
console.error(errorMessage);
})
.finally(() => {
console.log('Operation completed'); // 總是調用
});
2.3 Promises 的使用示例
示例 1：使用 Promise 的非同步操作
使用計時器模擬非同步操作。
JavaScript
function asyncOperation() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const success = Math.random() > 0.5;
if (success) {
resolve('Async operation was successful');
} else {
reject('Async operation failed');
}
}, 2000);
});
}
asyncOperation()
.then((message) => {
console.log(message);
})
.catch((error) => {
console.error(error);
})
.finally(() => {
console.log('Async operation completed');
});
示例 2：順序執行 Promises
模擬順序非同步操作。
JavaScript
function firstOperation() {
return new Promise((resolve) => {
setTimeout(() => {
console.log('First operation completed');
resolve('First result');
}, 1000);
});
}
function secondOperation(result) {
return new Promise((resolve) => {
setTimeout(() => {
console.log('Second operation completed');
resolve(`Second result, received: ${result}`);
}, 1000);
});
}
firstOperation()
.then((result) => {
return secondOperation(result);
})
.then((finalResult) => {
console.log(finalResult);
})
.catch((error) => {
console.error(error);
})
.finally(() => {
console.log('Both operations completed');
});
示例 3：使用 Promise.all 的並行執行 Promises
模擬並行非同步操作。
JavaScript
function operationOne() {
return new Promise((resolve) => {
setTimeout(() => {
console.log('Operation One completed');
resolve('Result One');
}, 1000);
});
}
function operationTwo() {
return new Promise((resolve) => {
setTimeout(() => {
console.log('Operation Two completed');
resolve('Result Two');
}, 1500);
});
}
Promise.all([operationOne(), operationTwo()])
.then((results) => {
console.log('All operations completed');
console.log(results); // 顯示：['Result One', 'Result Two']
})
.catch((error) => {
console.error('One of the operations failed', error);
});
GO TO FULL VERSION