第 1 週 · HTTP 基礎與第一個 Worker
路由，以及第 1 週複習
讓 /api/hello 與 /api/time 回不一樣的內容，並整理這一週的地圖。
正在打開這一關…
學習目標
- 用網址路徑把一支 Worker 分成幾個櫃台
- 會回 JSON，也會在找不到路徑時回 404
- 能把第 1 週的請求、方法、狀態碼、終端機、Worker 串成一段話
昨天整支 Worker 只有一句話。今天讓不同路徑做不同的事。這就是 路由：看路徑（有時也看方法），決定交給哪一段程式。
用生活例子理解
一間店可以有好幾個櫃台，門牌不同。
/api/hello是問訊台，固定跟你打招呼。/api/time是時鐘櫃台，告訴你伺服器認為現在幾點。- 其他路徑沒有櫃台，就誠實回
404。
/api/ 這個前綴是一種習慣，表示「這扇門回資料，不是回整頁 HTML」。瀏覽器開這個網址仍然看得到文字，因為 JSON 也只是文字。
生活比喻：路由像醫院的指示牌。掛錯科不會有人硬把你治好，而是告訴你「這裡沒有這科」。那就是 404，比沉默或回錯資料好。
動手做
大約 25 分鐘。沿用昨天的 hello-worker，或照案例新開一個資料夾。可跑的完整範例也在 examples/01-hello-routes/。
- 用案例換掉
src/index.js。 npm run dev，打開終端機給的網址。- 依序拜訪：
/api/hello/api/time/api/nope/
- 每一筆都在 Network 看狀態碼。前兩個應是 200，後兩個應是 404。
- 把
/api/hello的 JSON 改成有你的名字。存檔後重新整理。 - 在筆記用五句話寫第 1 週：前端／後端、請求與回應、GET 與狀態碼、終端機與 npm、Worker 與路由。
- 寫完去做第 1 週通關測驗。答對 80% 會打開第 2 週。
案例
export default {
async fetch(request) {
const url = new URL(request.url);
if (request.method !== "GET") {
return Response.json({ error: "這個練習只接受 GET" }, { status: 405 });
}
if (url.pathname === "/api/hello") {
return Response.json({
message: "哈囉，第 1 週",
path: url.pathname,
});
}
if (url.pathname === "/api/time") {
return Response.json({
now: new Date().toISOString(),
});
}
return Response.json({ error: "找不到這個路徑" }, { status: 404 });
},
};405 的意思是「這扇門在，但這個方法不接受」。時鐘用 ISO 格式，是一串不含地區歧義的時間文字，例如 2026-11-06T01:23:45.000Z。尾端的 Z 表示 UTC。
對照設定仍是昨天那份：main 指到 src/index.js，compatibility_date 用 2026-10-30。
常見錯誤
- 路徑比對寫成包含關係，例如
pathname.includes("hello")，結果/api/hello-world-extra也被算進去。練習階段先用全等===。 - 忘記處理其餘路徑，未知網址也回 200。呼叫的人無法分辨自己打錯字。
- 回傳一般物件卻沒有
Response。fetch必須回傳Response（或 Promise）。Response.json會幫你包好。 - 時間用
Date直接拼接成在地格式，卻沒說時區。API 先回 ISO 文字，畫面要怎麼顯示留給前端。
自我檢查
/api/hello與/api/time為什麼要分成兩個路徑，而不是在同一個路徑用參數硬塞？- 未知路徑你回了哪個狀態碼？
- 不看講義，你能說出
export default { fetch }是做什麼的嗎？
第 1 週到這裡。測驗在關卡地圖的第 1 週卡片底部。