跟著AI一起:從零打造一個互動式網站 Day21

網頁製作網頁排版網頁製作網頁 html

wqq 2025-10-07 12:41:24 ‧ 112 瀏覽

分享至

API 是什麼？用 Fetch 抓公開 API
API 就像是一個「餐廳服務生」：
你（前端） → 下訂單（發出請求 Request）。
廚房（後端） → 做菜（處理邏輯，查資料）。
服務生 → 把餐點送給你（回應 Response）。
在前端開發裡，最常用的就是 HTTP API，前端透過 GET、POST 等方法，去拿資料或送資料。
1.為甚麼要抓API

取得動態資料（Dynamic Data）
有了 API，就能從伺服器拿到最新資料。
例子：新聞網站 → API 提供最新文章；天氣網站 → API 提供即時天氣。
和後端溝通（前後端分離）
前端：專心負責畫面與互動。
後端：負責存取資料庫、商業邏輯。
API 就是「前端問、後端答」的橋樑。
例子：登入帳號 → 前端把帳號密碼送到後端 API，後端驗證後回傳結果。
整合第三方服務
很多網站不需要自己做所有功能，可以直接用別人提供的 API。
例子：
用 Google Maps API → 顯示地圖。
用 YouTube API → 內嵌影片播放清單。
用 OpenWeather API → 抓全世界的天氣。
讓資料可重複利用
API 回傳的是標準化格式（JSON），前端、APP、甚至別的服務都能使用同一份資料。
例子：同一個「會員資料 API」，可以同時服務：網頁版、iOS / Android APP，甚至內部管理系統
提升使用者體驗（UX）
使用者不需要重新整理頁面，就能即時更新內容。
例子：
點「換一句名言」→ API 馬上回傳新的一句。

JSON 資料格式

大部分 API 回傳的資料是 JSON (JavaScript Object Notation)。
範例：

{
  "location": "Taipei",
  "temperature": 28,
  "weather": "Sunny"
}

JSON = 物件 { key: value } + 陣列 [ ] 的組合。
前端可以直接用 JS 讀取 JSON。

Fetch API 基本語法

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json())  // 解析成 JSON
  .then(data => {
    console.log(data); // 顯示資料
  })
  .catch(error => {
    console.error("發生錯誤:", error);
  });

fetch(url)：發送請求
.then(response => response.json())：把回傳結果轉成 JSON
.then(data => { ... })：拿到資料後可以操作
.catch(error => { ... })：錯誤處理

範例：抓公開 API

這裡用 Dog API，每次會回傳一張隨機狗狗圖片。

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>Day21 API 練習</title>
</head>
<body>
  <h1>隨機狗狗圖片 🐶</h1>
  <button id="btn">換一張</button>
  <div>
    <img id="dog" src="" alt="dog" width="300">
  </div>

  <script>
    const btn = document.getElementById("btn");
    const dogImg = document.getElementById("dog");

    function loadDog() {
      fetch("https://dog.ceo/api/breeds/image/random")
        .then(res => res.json())
        .then(data => {
          dogImg.src = data.message; // API 回傳圖片網址
        })
        .catch(err => {
          console.error("錯誤:", err);
        });
    }

    btn.addEventListener("click", loadDog);
    loadDog(); // 預設載入一次
  </script>
</body>
</html>

👉 點按鈕就能換不同狗狗的照片！