第二十一天：async/await

**async/await**是基於 Promise 的語法糖，讓我們可以更直觀地撰寫非同步代碼，看起來就像同步代碼一樣。async/await 的引入使處理異步任務更加簡單且易讀，解決了使用 Promise 時過多 .then() 鏈式調用的問題。

1. async/await 是什麼？

• async 是用來聲明一個異步函數的關鍵字，它使得函數的返回值自動包裝為一個 Promise。
• await 是用來等待一個 Promise 解決的關鍵字，它只能在 async 函數內部使用。await 會暫停函數的執行，直到 Promise 完成，然後返回 Promise 的結果。

2. 基本語法

async 函數的語法：

async function example() {
return "Hello, world!";
}

await 的語法：

async function fetchData() {
let result = await someAsyncFunction(); // 等待 Promise 完成
console.log(result); // 打印 Promise 的結果
}

3. 使用 async/await 替代 .then()

使用 async/await，我們可以將異步操作的結果直接賦值給變量，而不需要多層 .then() 調用。這讓代碼看起來更像同步操作，更容易閱讀和維護。

範例：

// 用 Promise
function getData() {
return new Promise((resolve, reject) => {
setTimeout(() => resolve("資料已取得"), 1000);
});
}

// 使用 async/await
async function fetchData() {
try {
let result = await getData();
console.log(result); // 資料已取得
} catch (error) {
console.log("錯誤發生:", error);
}
}

fetchData();

在這裡，await 等待 getData() 的 Promise 完成，並將結果賦值給 result。使用 try/catch 來捕獲錯誤，這比 .catch() 更加直觀。

4. 連續的 await 操作

async/await 可以像 Promise 一樣處理多個異步操作，只需依次等待每個 Promise 完成。

範例：

async function processOrders() {
try {
let user = await getUser();
let orders = await getOrders(user.id);
let summary = await summarizeOrders(orders);
console.log(summary); // 打印訂單摘要
} catch (error) {
console.log("錯誤:", error);
}
}

processOrders();

這樣的寫法比嵌套 .then() 更直觀，也避免了「Promise 鏈」的問題，代碼簡潔且易讀。

5. await 多個 Promise

有時你需要同時執行多個 Promise，並等待所有 Promise 完成，這時可以結合 Promise.all() 與 await 使用。

範例：

async function fetchMultipleData() {
try {
let [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
console.log(data1, data2);
} catch (error) {
console.log("錯誤發生:", error);
}
}

fetchMultipleData();

這裡，Promise.all() 讓我們同時發出多個請求，並在兩個請求都完成後，一次性獲取結果。這種寫法有效提高了效率，因為所有操作是並行執行的。

6. 當心 await 的順序問題

需要注意的是，await 會暫停代碼的執行，直到 Promise 完成。如果不需要依賴前一個 Promise 的結果，可以同時啟動多個 Promise，而不是等待一個完成後再啟動下一個。

範例（錯誤示範，會依次執行）：

async function sequentialRequests() {
let data1 = await fetchData1();
let data2 = await fetchData2();
console.log(data1, data2);
}

範例（正確示範，並行執行）：

async function parallelRequests() {
let data1Promise = fetchData1();
let data2Promise = fetchData2();
let data1 = await data1Promise;
let data2 = await data2Promise;
console.log(data1, data2);
}

7. await 的錯誤處理

await 與 try/catch 一起使用，可以更加優雅地處理異步操作中的錯誤，比 .catch() 更加清晰直觀。

範例：

async function getData() {
try {
let result = await fetchFromAPI();
console.log(result);
} catch (error) {
console.error("發生錯誤:", error);
}
}

getData();

如果 fetchFromAPI() 出現錯誤，錯誤會被 catch 捕獲並打印出來。