Fetch

HTTP คือภาษากลางระหว่าง browser กับ server

เวลา browser ขอข้อมูลจาก server ทั้งการเปิดหน้าเว็บ, โหลด API, ส่งฟอร์ม หรือกดลบรายการ เบื้องหลังมักคุยกันผ่าน **HTTP** มองแบบง่ายที่สุด HTTP คือกติกาว่า client จะส่งคำขอแบบไหน และ server จะตอบกลับอะไรให้บ้าง จึงเป็นพื้นฐานที่ต้องเข้าใจก่อนใช้ `fetch()` จริง

Browser (client)
  -> ส่ง HTTP request ไปยัง URL

Server
  -> ประมวลผล
  -> ส่ง HTTP response กลับมา

Browser
  -> ดู status, headers, body
  -> นำข้อมูลไปแสดงผลหรือทำงานต่อ

• client คือฝั่งที่เริ่มส่งคำขอ เช่น browser หรือ frontend app
• server คือฝั่งที่รับคำขอ ประมวลผล และส่งผลกลับมา
• HTTP ไม่ได้บอกแค่ “ขอข้อมูล” แต่บอก intent ด้วย เช่น อ่าน สร้าง แก้ไข หรือลบ

request มีอะไรบ้าง

ไม่ใช่ทุก request จะมี body เสมอไป เช่น `GET` มักใช้แค่ URL กับ query parameters ส่วน `POST`, `PUT`, `PATCH` มักต้องมี body เพื่อส่งข้อมูลใหม่ไปให้ server

fetch("https://jsonplaceholder.typicode.com/todos/1");
// URL: /todos/1
// Method: GET
// Headers: browser ใส่พื้นฐานบางอย่างให้อัตโนมัติ
// Body: ไม่มี

fetch("https://jsonplaceholder.typicode.com/todos", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "เรียน HTTP",
    completed: false,
  }),
});

response บอกอะไรเราบ้าง

เมื่อ server ตอบกลับมา เราไม่ได้สนใจแค่ข้อมูลใน body อย่างเดียว แต่ต้องดูด้วยว่าคำขอนั้นสำเร็จหรือไม่ สำเร็จแบบไหน และ server ส่งข้อมูลประเภทใดกลับมา

• ฝั่ง `fetch()` เรามักดู `response.ok` และ `response.status` เป็นอันดับแรก
• ถ้า response เป็น JSON ก็มักตามด้วย `await response.json()`
• บาง response อาจไม่มี body เลย เช่น `204 No Content`

status code ที่ควรจำก่อนใช้ fetch

จุดที่สำคัญมากสำหรับบท fetch คือ HTTP error อย่าง `404` หรือ `500` ไม่ได้แปลว่า network พังเสมอไป หลายครั้ง browser ยังรับ response กลับมาได้อยู่ เพียงแต่ status ไม่อยู่ในช่วงสำเร็จ

JSON คือ payload ที่ fetch เจอบ่อยที่สุด

เวลาคุยกับ REST API เรามักส่งและรับข้อมูลเป็น **JSON** เพราะมันแทน object, array, string, number และ boolean ได้ตรงกับสิ่งที่ JavaScript ใช้งานอยู่แล้ว ดังนั้นเวลาใช้ fetch จริง pattern ที่เจอบ่อยมากคือ “รับ response มาก่อน แล้วแปลง body JSON ให้เป็น object ด้วย `response.json()`”

async function loadTodo() {
  const response = await fetch(
    "https://jsonplaceholder.typicode.com/todos/1"
  );

  if (!response.ok) {
    throw new Error("โหลดข้อมูลไม่สำเร็จ");
  }

  const todo = await response.json();

  console.log(todo.id);
  console.log(todo.title);
  console.log(todo.completed);
}

loadTodo();

• JSON ที่เดินทางบน network ยังเป็นข้อความอยู่ ไม่ใช่ object พร้อมใช้ทันที
• `response.json()` ทำหน้าที่อ่าน body แล้ว parse JSON ให้เรา
• นี่คือสะพานสำคัญจากพื้นฐาน HTTP ไปสู่การใช้ `fetch()` จริง