用外部 API
在你 app 從其他服務抓資料
⏱ 預估 ~5 分鐘
01 · 讀一讀
大部分真實 app 不孤立存在。它們跟其他服務對話拿資料：天氣 app 呼叫天氣 API、社群 app 呼叫驗證 API、電商 app 呼叫支付 API。
API(Application Programming Interface)就是回資料而不是網頁的 URL。你拜訪網站，瀏覽器拿到 HTML。你程式呼叫 API，拿到 JSON — 程式能用的結構化資料。
你 Level 5 學過 API。現在我們在真實程式裡用。
💡 想像一下如果你 server 是餐廳廚房，外部 API 是供應商。你不自己種番茄 — 你叫供應商（API）、下單（請求），他們送貨（回應）。供應商關了（API 掛了），你需要備案（錯誤處理）。
02 · 看程式碼
下面是從外部 API 抓資料的 route。讀過、注意三個關鍵模式：async/await、fetch、try/catch。
範例：API route
app.get('/api/joke', async (req, res) => {
try {
const response = await fetch('https://official-joke-api.appspot.com/random_joke');
const joke = await response.json();
res.json({
setup: joke.setup,
punchline: joke.punchline
});
} catch (error) {
res.status(500).json({ error: 'Failed to fetch joke' });
}
});
注意三件事：（1） async/await 讓你等外部資料不凍結 server。'await' 關鍵字暫停這函式直到資料到，但其他請求繼續處理。（2） fetch 送 HTTP 請求到外部 API。（3） try/catch 優雅處理錯誤 — 笑話 API 掛了，你 server 還是回有用錯誤訊息而不是當機。
03 · 讀一讀
用外部 API 時，有些概念一直出現。懂這些會省你常見錯誤。
重點整理
- async/await — 等外部資料不擋 server 的方法
- API key — 付費或私 API 的驗證（放 .env！）
- Rate limit — API 限制你每分鐘能發幾個請求
- 錯誤處理 — API 掛了永遠要有 fallback
04 · 真機練習
試著把這 API route 加到你 Level 7 的 Express server。這呼叫不需 API key 的免費笑話 API — 適合練習。
// Add this to your app.js
app.get('/api/joke', async (req, res) => {
try {
const response = await fetch('https://official-joke-api.appspot.com/random_joke');
const joke = await response.json();
res.json({ setup: joke.setup, punchline: joke.punchline });
} catch (error) {
res.status(500).json({ error: 'Failed to fetch joke' });
}
});05 · 填空
在 JavaScript 處理 API 錯誤，把 fetch 呼叫包在 _____/catch 區塊。
06 · 選擇題
為什麼 API 呼叫要包 try/catch 區塊？
- JavaScript 所有函式都要 try/catch
- 讓程式跑快點
- 防止 API 被叫太頻繁
- API 掛了優雅處理錯誤
⚠ 完整互動體驗需要 JavaScript。請啟用 JavaScript 後重新整理。
※ 本站為獨立繁中教學專案，非 Anthropic 官方產品。Claude™ 為 Anthropic, PBC 商標。