Fetch

Fetch คืออะไร

`fetch()` คือ built-in browser API สำหรับส่ง HTTP request ไปคุยกับ server แล้วรับ response กลับมา โดยไม่ต้องติดตั้ง library เพิ่ม จุดสำคัญคือ `fetch()` ไม่คืนข้อมูลจริงทันที แต่คืน **Promise<Response>** มาก่อน เพราะการคุยกับ server ต้องรอ network, การประมวลผลของปลายทาง และการส่งข้อมูลกลับมา

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

  console.log(response instanceof Response); // true
  console.log("status:", response.status); // 200
  console.log("title:", todo.title); // delectus aut autem
}

fetchTodo();

• `fetch(url)` แบบไม่ส่ง options เพิ่ม จะใช้ method เป็น `GET` โดยอัตโนมัติ
• `await fetch(...)` ได้ `Response` object มาก่อน ไม่ได้ object ข้อมูลปลายทางทันที
• `response.json()` และ `response.text()` ก็คืน Promise จึงต้อง `await` อีกชั้น
• fetch ใช้บ่อยมากกับการโหลดข้อมูล, ส่งฟอร์ม, แก้ข้อมูล และลบข้อมูลแบบไม่ reload หน้า

mental model: fetch มี 3 ขั้นหลัก

เวลาใช้ fetch มือใหม่มักคิดว่า `await fetch(...)` แล้วจะได้ object ปลายทางทันที แต่จริง ๆ เราเพิ่งได้ **ซอง response** มาก่อน จากนั้นยังต้องดู status และค่อยอ่าน body ออกมาอีกที

pattern พื้นฐานที่ใช้บ่อยที่สุด

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

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

  const profile = await response.json();

  console.log(profile.name);
  console.log(profile.email);
}

loadProfile();

• เริ่มจาก `fetch()` เพื่อส่ง request
• เช็ก `response.ok` หรือ `response.status` ก่อนใช้ข้อมูล
• เลือกวิธีอ่าน body ให้ตรงกับชนิดข้อมูลที่ server ส่งมา
• ถ้าเป็น JSON API ส่วนใหญ่จะลงท้ายที่ `await response.json()`

เปรียบเทียบ HTTP methods ใน Fetch

ภาพรวมคือทุก method ใช้ flow เดียวกัน: ส่ง request → เช็ก response.ok → อ่าน body ต่างกันแค่ intent และรายละเอียดที่ต้องระบุเพิ่มใน options object

response object สำคัญอย่างไร

• `fetch()` ไม่ถือว่า HTTP 404 หรือ 500 เป็นการ reject โดยอัตโนมัติ
• หลายกรณีเรายังได้ `Response` object กลับมาอยู่ จึงต้องเช็ก status เอง
• นี่คือเหตุผลที่พื้นฐาน HTTP และวิธีอ่าน response สำคัญมากก่อนลงลึก method ต่าง ๆ

ลอง fetch ก่อนเข้าบทเรียนย่อย

ข้อผิดพลาดที่พบบ่อย

ควรเริ่มจากหน้าไหนใน series นี้