【React 學習筆記 EP.15】Async/Await

什麼是 Async/Await？

Async/Await 是用來處理非同步操作的語法，讓你可以用「一行接一行」的方式撰寫需要等待的程式碼，例如 fetch。

Async/Await 概念

1. async：在函式前加上 async，宣告這個函式裡面會有需要等待的操作。
2. await：放在一個會回傳 Promise 的操作前面，讓程式暫停，等結果回來後再繼續。
3. useEffect：React 中用來執行「副作用」的 Hook，像是在元件載入時去抓取資料。useEffect 本身不能直接用 async，所以我們需要在裡面另外定義一個 async。

Async/Await 語法

1. async function fetchData()：宣告一個非同步函式。
2. await fetch(url)：等待 HTTP 請求完成，取得回應。
3. await response.json()：等待回應內容轉換成物件。
4. fetchData()：呼叫這個非同步函式，讓它開始執行。

import { useState, useEffect } from "react";

export default function App() {
  const [user, setUser] = useState(null); // 儲存使用者資料

  useEffect(() => {
    async function fetchUser() { // 定義非同步函式
      try {
        const res = await fetch("https://jsonplaceholder.typicode.com/users/1"); // 等待請求完成
        
        // 確保 HTTP 狀態碼為 200-299 之間，否則主動拋出錯誤
        if (!res.ok) {
          throw new Error("網路請求失敗");
        }

        const data = await res.json(); // 等待轉換成物件
        setUser(data); // 將資料存入 state
      } catch (err) {
        console.error("載入失敗", err); // 錯誤處理
      }
    }
    fetchUser(); // 呼叫非同步函式
  }, []);

  return <div>{user ? user.name : "載入中..."}</div>; // 根據 state 顯示內容
}