LESSON 05B · 午餐揪團頁主線 · 原第 5 堂拆分（下）

資料（下）：Fetch 抓外部資料

你的頁面今天要「活」起來——顯示的不再是寫死的假資料，而是這一刻真實世界正在發生的資料。同時埋下一個重要的伏筆：有些資料能直接拿，有些不行。

fetch 請求 Network 面板公開資料免金鑰產出：真實資料 widget

✓

完成定義 · Definition of Done

頁面上有一個資料是「抓外部真實資料」顯示出來的，且學員能在 Network 面板中指認出對應的請求。

0:00–0:05	回顧 5a：今天要讓頁面「抓外部資料」
0:05–0:20	概念：fetch 是重複發生的請求 + Network 面板現場示範
0:20–0:45	動手：加一個 fetch 外部公開資料的 widget（天氣）
0:45–0:55	點到為止：有些資料需要密碼，前端不能碰
0:55–1:00	收尾 + 預告：第 7 堂會遇到需要密碼的資料

01fetch：跟外部要資料

畫面上顯示的天氣、匯率，通常不是寫死在程式碼裡的（它每天都在變）。你的頁面要現場發一個請求去跟氣象局的伺服器要資料——這個動作叫 fetch。

🔁關鍵性質

fetch 是重複發生的動作——每次打開頁面、每次你要求它，它就會再要一次最新的資料。打開 Network 面板，你會看到頁面剛剛同時發出去了好幾條這樣的請求。

圖 1.1fetch：頁面現場跟別的伺服器要資料，Network 面板看得到每一條請求。

02動手：天氣 widget

03點到為止：不是所有資料都能直接抓

像天氣這種「公開、不用密碼就能查」的資料，前端可以直接抓。但如果一個資料來源需要一組「通行密碼」（API key）才能用——這組密碼絕對不能寫在前端，因為前端的程式碼任何人打開瀏覽器都看得到。

圖 2.1有些資料能直接拿、有些不行：需要 API key 的來源，密碼絕對不能出現在前端——第 7 堂會細講。

這件事第 7 堂會細講。今天只要記得：有些資料能直接拿，有些不行。

·AI Prompt speed dial起手式 · 用自己的話改

A加一個 fetch 外部資料的 widget

在頁面上加一個小區塊，顯示台北目前的天氣（溫度、天氣狀況），
用一個不需要 API 金鑰的公開天氣資料來源（例如 open-meteo）。
請告訴我這段程式碼發出的請求，我要怎麼在瀏覽器的 Network 面板裡找到它。

B理解公開 vs 需金鑰

請解釋一下，像天氣這種資料為什麼不用密碼就能拿，
而有些資料來源需要密碼（API key）才能用？
那些密碼為什麼不能放在前端程式碼裡？

·作業與檢核

作業：一張 issue ＋一個 PR——加另一個 fetch widget。PR 描述包含：「這個資料來源需不需要密碼？」

講師 / 助教檢核重點