JavaScript 中的 await 關鍵字：從 fetch 到現代非同步處理

更新日期： 2025 年 3 月 9 日

在 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 請求和其他非同步操作。