第 1 週 · HTTP 基礎與第一個 Worker
HTTP 方法、狀態碼、Headers、JSON
把 GET、POST、常見狀態碼和 JSON 當成一套固定的說話方式。
正在打開這一關…
學習目標
- 分得清 GET 與 POST 該用在什麼時候
- 認得 200、201、400、401、404、500
- 會讀寫一小段 JSON，並說出它為什麼比一段散文好交接
昨天你看到了一筆請求與回應。今天把常用的「動詞」和「短句」記下來。留言板從這裡開始長出形狀：看留言用一種方法，新增留言用另一種。
用生活例子理解
方法是你對櫃台說的動詞。
| 方法 | 意思 | 留言板裡的例子 |
|---|---|---|
GET |
我要看，請不要改資料 | 取得留言清單 |
POST |
我要新增一筆 | 送出一則新留言 |
PUT |
我要整筆換成這一份 | 整則留言改寫 |
DELETE |
我要刪掉 | 刪除一則留言 |
GET 不該有副作用。重新整理十次，資料不該多出十筆。新增才用 POST。
狀態碼分三個區間就夠用了：
- 2xx 成功。
200順利，201已建立新的一筆。 - 4xx 客人這端的問題。
400你給的資料看不懂，401還沒登入，404找不到。 - 5xx 廚房這端的問題。
500是伺服器自己出錯，不該把內部細節直接顯示給客人。
Headers 是信封註記。最常看到的是 content-type。application/json 表示本文是 JSON，不是網頁。
JSON 是一種文字格式，雙方都說好用大括號、中括號、雙引號。它很像你在 JavaScript 裡寫的物件，但 JSON 的鍵一定要雙引號，也不能寫註解或函式。
生活比喻：JSON 是統一格式的點餐單。自由書寫的紙條（「跟上次一樣，少鹽」）廚房會看不懂。表格（品名、數量）就接得起來。
動手做
大約 20 分鐘。繼續用 DevTools，再加上瀏覽器主控台。
- 打開昨天那個網站的 Network，點一筆
GET，確認方法是 GET。 - 如果網站有表單或搜尋，送出一次，看有沒有
POST。沒有也沒關係，把「我沒看到 POST」寫進筆記。 - 打開主控台，貼上這段，按 Enter：
const note = { author: "你", body: "第一則留言" };
JSON.stringify(note);- 你會看到一串帶雙引號的文字。再貼
JSON.parse('{"ok":true,"n":1}')，它變回物件。 - 故意弄壞一次：
JSON.parse("{ok:true}")。觀察錯誤。原因是 JSON 的鍵必須用雙引號。 - 對照下表，把每個狀態碼用自己的話寫成一句中文。200、201、400、401、404、500。
案例
這支 Worker 用路徑與方法決定回應。GET /api/messages 回 JSON 陣列；POST 先檢查本文，不對就回 400。
export default {
async fetch(request) {
const url = new URL(request.url);
if (url.pathname === "/api/messages" && request.method === "GET") {
const messages = [{ id: 1, author: "Ada", body: "哈囉" }];
return Response.json(messages);
}
if (url.pathname === "/api/messages" && request.method === "POST") {
let data;
try {
data = await request.json();
} catch {
return Response.json({ error: "請傳送 JSON" }, { status: 400 });
}
const body = typeof data.body === "string" ? data.body.trim() : "";
if (!body) {
return Response.json({ error: "留言不能是空白" }, { status: 400 });
}
return Response.json({ id: 2, body }, { status: 201 });
}
return Response.json({ error: "找不到這個路徑" }, { status: 404 });
},
};Response.json 會幫你把物件變成 JSON 文字，並加上 content-type: application/json。
常見錯誤
- 用
GET新增資料，把內容塞在網址上。網址會被紀錄、被分享，也不適合長留言。 - 失敗時仍回
200，只在 JSON 裡寫{ "ok": false }。前端會以為成功。該用400或404就用。 - 把 JavaScript 物件直接當 JSON。
{ author: "你" }不是合法 JSON，鍵少了雙引號。 - 狀態碼背一長串卻說不出 4xx 與 5xx 的差別。先記住：4 開頭多半是請求本身有問題，5 開頭是伺服器。
自我檢查
- 「看留言清單」與「新增一則留言」各該用哪個方法？為什麼？
- 客人少傳了留言內容，你會回哪個狀態碼？
- 為什麼 JSON 比一段自由文字適合當 API 的本文？