【React 學習筆記 EP.14】Fetching

什麼是 Fetching？

Fetching 就是透過瀏覽器提供的 fetch API，向遠端伺服器發送請求並取得資料。

Fetching 概念

1. useEffect：告訴 React「當元件出現在畫面上時，幫我執行這段工作」，通常用來發送資料請求。
2. fetch：瀏覽器內建的函式，負責實際向伺服器發出請求並取回資料。
3. useState：用來存放從伺服器拿回來的資料，當資料更新時，React 會自動重新渲染畫面。

Fetching 語法

1. useEffect(() => { }, [])：元件首次渲染後執行一次 { } 內的程式碼，[] 代表只在第一次執行。
2. fetch(url)：向指定的 url 發送 HTTP 請求，回傳一個 Promise。
3. .then(res => res.json())：伺服器回應後，將原始回應轉換成 JSON 格式的物件。
4. .then(data => setData(data))：拿到轉換好的資料後，用 setData 存進 state，觸發畫面更新。

useEffect(() => {
  fetch(url)
    .then(res => res.json())
    .then(data => setData(data));
}, []);
```

```JavaScript
import "./App.css";
import { useState, useEffect } from "react";

export default function App() {
  const [post, setPost] = useState(null); // 建立 state 存放資料，初始值為 null

  useEffect(() => { // 元件掛載後執行一次
    fetch("https://jsonplaceholder.typicode.com/posts/1") // 發送請求
      .then((res) => res.json()) // 將回應轉為 JSON
      .then((data) => setPost(data)); // 把資料存進 state
  }, []); // 空陣列：只在第一次渲染時執行

  if (!post) return <p>載入中...</p>; // 資料還沒回來時顯示提示
  return <h1>{post.title}</h1>; // 資料回來後顯示標題
}