Mission 3: Routing และลำดับของ Route

เป้าหมายของ Mission นี้: เข้าใจว่า Express จับคู่ Request กับ Route ยังไง และลำดับ ของ route สำคัญอย่างไร

1. Learning Objective

จบ Mission นี้คุณจะ

• อธิบายได้ว่า Routing คืออะไร
• เขียน route ได้หลาย Method บน path เดียวกัน
• เข้าใจว่า Express เลือก route จากบนลงล่าง และรู้ว่าทำไมลำดับถึงสำคัญ
• ทดสอบ Method ที่ไม่ใช่ GET ได้ด้วย Postman/Thunder Client

2. Theory — Routing คือ "ป้ายบอกทาง"

Route = คู่ของ (Method + Path) ที่ผูกกับฟังก์ชันหนึ่งตัว

app.METHOD(PATH, HANDLER)
     |      |       |
     |      |       +--> ทำอะไรเมื่อ Request ตรงเงื่อนไข
     |      +----------> ทำกับอะไร  เช่น "/books"
     +-----------------> ทำแบบไหน  เช่น get, post, put, delete

นี่คือจุดที่ตาราง REST จาก Chapter 1 กลายเป็นโค้ดจริง

app.get("/books", ...)        // ดูทั้งหมด
app.get("/books/:id", ...)    // ดูตัวเดียว
app.post("/books", ...)       // เพิ่ม
app.put("/books/:id", ...)    // แก้
app.delete("/books/:id", ...) // ลบ

สังเกตว่า "/books" โผล่ 2 ครั้ง แต่คนละ Method — Express ถือว่าเป็นคนละ route กันโดย สิ้นเชิง ไม่ตีกัน

3. Diagram — Express หา route ยังไง

Express ไล่เช็ก จากบนลงล่าง และ หยุดที่ตัวแรกที่ตรง

flowchart TD
    A["GET /books เข้ามา"] --> B{"route 1: GET / ?"}
    B -->|"ไม่ตรง"| C{"route 2: GET /about ?"}
    C -->|"ไม่ตรง"| D{"route 3: GET /books ?"}
    D -->|"ตรง!"| E["รัน handler แล้วจบ<br/>ไม่ดู route ที่เหลือเลย"]
    D -->|"ถ้าไม่ตรง"| F["...ไล่ต่อจนหมดไฟล์"]
    F --> G["ไม่เจอเลย -> 404"]
    style E fill:#14532d,stroke:#22c55e,color:#fff
    style G fill:#5c2d2d,stroke:#ef4444,color:#fff

ทำไมเรื่องนี้สำคัญ? ดูตัวอย่างกับดักคลาสสิกนี้

app.get("/books/:id", (req, res) => res.send("หนังสือรายเล่ม"));
app.get("/books/popular", (req, res) => res.send("หนังสือยอดนิยม")); // ❌ ไม่มีวันถูกเรียก

เพราะ /books/popular ตรงกับ /books/:id ก่อน (Express มองว่า :id = "popular") Express หยุดที่ตัวแรกที่ตรง จึงไม่มีทางไปถึงบรรทัดล่าง

แก้โดยเอาตัวที่เฉพาะเจาะจงกว่าขึ้นก่อน

app.get("/books/popular", ...); // ✅ เฉพาะเจาะจง อยู่บน
app.get("/books/:id", ...);     // ✅ กว้าง อยู่ล่าง

กฎทอง: route ที่เจาะจงกว่า ต้องอยู่เหนือ route ที่กว้างกว่าเสมอ

4. Live Coding — หลาย Method บน path เดียว

import express from "express";

const app = express();
const PORT = 3000;

// -- Collection: /books ------------------------------------
app.get("/books", (req, res) => {
  res.json({ message: "ดูหนังสือทั้งหมด" });
});

app.post("/books", (req, res) => {
  res.status(201).json({ message: "เพิ่มหนังสือใหม่" });
});

// -- Single resource: /books/:id ---------------------------
app.get("/books/:id", (req, res) => {
  res.json({ message: `ดูหนังสือเล่มที่ ${req.params.id}` });
});

app.put("/books/:id", (req, res) => {
  res.json({ message: `แก้ไขหนังสือเล่มที่ ${req.params.id}` });
});

app.delete("/books/:id", (req, res) => {
  res.json({ message: `ลบหนังสือเล่มที่ ${req.params.id}` });
});

app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

:id คือ ตัวแปรใน path — อะไรก็ตามที่มาตรงตำแหน่งนั้นจะถูกเก็บไว้ใน req.params.id (Chapter 4 จะเจาะลึกเรื่องนี้ ตอนนี้แค่รู้ว่ามันคืออะไรพอ)

5. ปัญหาใหม่ที่เพิ่งเกิด: จะทดสอบ POST ยังไง?

เบราว์เซอร์พิมพ์ URL ได้แค่ GET เท่านั้น — จะยิง POST/PUT/DELETE ต้องใช้เครื่องมือช่วย

        วิธีทดสอบ API
+---------------------------------------------------+
| เบราว์เซอร์         -> ได้เฉพาะ GET                 |
| Postman            -> ครบทุก Method (แอปแยก)      |
| Thunder Client     -> ครบทุก Method (extension    |
|                       ใน VS Code เบากว่า แนะนำ)    |
| curl               -> ครบทุก Method (command line)|
+---------------------------------------------------+

ติดตั้ง Thunder Client: เปิด VS Code → Extensions → ค้นหา "Thunder Client" → Install → จะมีไอคอนสายฟ้าโผล่ที่แถบซ้าย → New Request → เลือก Method → ใส่ URL → Send

หรือใช้ curl ใน terminal ก็ได้ (ไม่ต้องลงอะไรเพิ่ม)

curl http://localhost:3000/books
curl -X POST http://localhost:3000/books
curl -X DELETE http://localhost:3000/books/3

6. Common Mistakes

7. Summary

• Route = Method + Path + Handler
• path เดียวกันแต่คนละ Method = คนละ route กัน ไม่ตีกัน
• Express ไล่หา route จากบนลงล่าง หยุดที่ตัวแรกที่ตรง → route เจาะจงต้องอยู่บน
• :id = ตัวแปรใน path เก็บไว้ที่ req.params.id
• ทดสอบ Method อื่นนอกจาก GET ต้องใช้ Thunder Client / Postman / curl