async/await 教學-JavaScript 魔法學院

在現代的 JavaScript 開發中，非同步程式碼已成為不可或缺的一部分。async 和 await 是兩個強大的關鍵字，能讓我們以更簡潔和直觀的方式處理非同步操作。本篇教學將帶你深入瞭解這兩個關鍵字。

基本概念

async 關鍵字用於聲明一個非同步函數，該函數會自動返回一個 Promise。await 關鍵字則用於等待一個 Promise 被解決（resolved），它只能在 async 函數內使用。

使用 async 和 await

讓我們先來看看如何使用 async 和 await：

// 聲明一個異步函數
async function fetchData() {
  // 使用 await 等待 Promise 被解決
  let response = await fetch('https://api.example.com/data');
  let data = await response.json();
  console.log(data);
}

// 調用異步函數
fetchData();

在這個例子中，fetchData 函數使用 fetch API 來獲取資料。因為 fetch 返回一個 Promise，我們可以用 await 關鍵字來等待其完成並獲取結果。

錯誤處理

我們可以使用 try...catch 語句來處理非同步操作中的錯誤：

async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('網路回應錯誤');
    }
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('發生錯誤：', error);
  }
}

fetchData();

在這裡，我們使用 try...catch 語句來捕捉和處理非同步操作中的錯誤，例如網路請求失敗或解析 JSON 資料失敗。

重要提示

• 只能在 async 函數內使用 await：如果在非 async 函數內使用 await，會導致語法錯誤。
• 返回值會被包裝成 Promise：即使 async 函數內沒有明確返回 Promise，其返回值也會被自動包裝成 Promise。

範例練習

試試看自己寫一個使用 async 和 await 的範例。你可以從以下簡單的練習開始：

1. 基本練習：寫一個 async 函數，使用 fetch 來從一個 API 獲取資料，並使用 console.log 列印資料。
2. 錯誤處理：改進你的 async 函數，新增 try...catch 語句來處理可能的錯誤，並列印錯誤訊息。
3. 多個非同步操作：在一個 async 函數內連續呼叫兩次 fetch，分別獲取不同的資料，並將結果結合在一起。

範例code可參考這篇

結論

async 和 await 是處理 JavaScript 中非同步操作的強大工具，能使程式碼更簡潔易懂。希望這篇教學能幫助你掌握這些關鍵字，讓你的程式設計更加順暢。

進階學習資源

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function