JavaScript 中的 await 關鍵字：從 fetch 到現代非同步處理
更新日期： 2024 年 11 月 7 日
在 JavaScript 中，非同步處理是一種常見的程式編寫方式，尤其是在呼叫 API 或處理較長時間操作時。
傳統上，我們使用 fetch 函數與 .then() 方法來處理非同步請求，這樣可以在不阻塞程式的情況下等待伺服器回應。
然而，為了讓代碼更易讀，JavaScript 引入了 async 和 await 關鍵字，使得非同步操作的編寫更為簡潔。
以下是使用 await 關鍵字處理非同步請求的詳細說明。
閱讀本文前，建議具備相關概念：
傳統方式：fetch 搭配 .then()
在沒有 await 關鍵字之前，我們通常使用 fetch 與 .then() 來處理非同步請求。
以下是一個傳統的範例，用於從 API 獲取資料並輸出每個使用者的名稱：
const url = "https://jsonplaceholder.typicode.com/users";
fetch(url)
.then((data) => {
return data.json();
})
.then((users) => {
users.forEach((element) => {
console.log(element.name);
});
});代碼說明
- 首先，我們使用
fetch(url)發送一個 GET 請求至指定的url。 - 接著，使用
.then()來處理回應資料。第一個.then()會將回應轉換成 JSON 格式。 - 第二個
.then()接收已轉換的 JSON 資料，並用.forEach()方法來輸出每個使用者的name。
雖然這種方式能達到目的，但使用 .then() 的嵌套方式使代碼可讀性變差，特別是當多個非同步請求串接在一起時，會導致代碼過於冗長。
使用 async 與 await 進行非同步處理
JavaScript 引入 async 和 await 後，我們可以用同步的方式來編寫非同步代碼，使得程式碼結構更清晰、更易於維護。
await 用來等待一個 Promise 完成，因此我們可以逐行處理非同步代碼。
使用 async 與 await 的範例
早期在使用 await 關鍵字時，必須將它包裹在 async 函數內才能使用。以下是一個範例：
const url = "https://jsonplaceholder.typicode.com/users";
async function fetchData() {
const result = await fetch(url);
const users = await result.json();
users.forEach((user) => {
console.log(user.name);
});
}
fetchData();代碼說明
- 我們定義了一個
async函數fetchData。 - 在
fetchData中使用await關鍵字來等待fetch(url)的回應。 await result.json()會將回應轉換成 JSON 格式。- 最後，我們用
.forEach()迴圈來輸出每個使用者的name。
相比於 .then()，使用 async/await 讓代碼更接近同步邏輯，使得程式流程更為直觀。
現代瀏覽器中的 await：不再依賴 async
在更現代的瀏覽器中，已經允許在頂層代碼中直接使用 await，無需再包裹在 async 函數中。這讓我們可以直接在全域範圍使用 await，進一步簡化了代碼：
const url = "https://jsonplaceholder.typicode.com/users";
const result = await fetch(url);
const users = await result.json();
users.forEach((user) => {
console.log(user.name);
});代碼說明
- 直接使用
await fetch(url)獲取回應。 - 接著用
await result.json()來解析 JSON 資料。 - 最後用
.forEach()迴圈來輸出每個使用者的名稱。
這樣的寫法進一步簡化了非同步代碼的處理流程，讓代碼更接近同步編寫的風格。
但需要注意的是，不支援此功能的環境中（如某些舊版本的 Node.js 或瀏覽器）可能無法執行這種方式，因此開發時應確認環境是否支持。
總結
使用 async 和 await 可以讓 JavaScript 的非同步代碼更具可讀性，並避免了 .then() 的多重嵌套問題。
現代瀏覽器允許在全域範圍中直接使用 await，進一步簡化了代碼結構。
隨著 JavaScript 的進步，async/await 成為非同步程式設計中的標準方式，讓開發者可以更輕鬆地處理 API 請求和其他非同步操作。