Fetch

DELETE ใช้ลบ resource

เมื่อ frontend ต้องบอก server ให้ลบข้อมูล เช่น ลบ todo, ลบสินค้าในตะกร้า หรือ ลบบัญชีผู้ใช้ เรามักใช้ HTTP method เป็น **DELETE** เพื่อสื่อ intent ให้ชัดว่ากำลังลบ resource

async function deleteTodo(id) {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${id}`,
    {
      method: "DELETE",
    }
  );

  if (!response.ok) {
    throw new Error("ลบ todo ไม่สำเร็จ");
  }

  console.log("ลบ todo #" + id + " เรียบร้อย");
}

deleteTodo(1);

• ส่วนมาก DELETE ต้องระบุ `method` ชัดเจน เพราะ default ของ fetch คือ GET
• DELETE จำนวนมากไม่ต้องมี body แต่ขึ้นอยู่กับ API contract ของระบบนั้น
• แม้จะไม่มี body ก็ยังควรเช็ก `response.ok` ก่อนถือว่าสำเร็จ

request shape ของ DELETE มักเล็กกว่ากลุ่ม write methods อื่น

ภาพรวมที่ควรจำคือ DELETE มักพึ่ง URL เพื่อบอกว่าจะลบ resource ไหน เช่น `/todos/1` ต่างจาก POST/PUT/PATCH ที่ต้องส่งข้อมูลใหม่เข้า body มากกว่า

เช็ก success จาก `response.ok` และ status

DELETE สำเร็จไม่ได้แปลว่าจะต้องมี JSON body ตอบกลับเสมอไป หลาย API อาจตอบ `200 OK`, `202 Accepted` หรือ `204 No Content` ก็ได้ สิ่งที่เราสนใจก่อนคือ status สำเร็จหรือไม่

async function deleteTodoSafe(id) {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${id}`,
    { method: "DELETE" }
  );

  if (!response.ok) {
    throw new Error(
      `ลบ todo #${id} ไม่สำเร็จ (status: ${response.status})`
    );
  }

  console.log("status:", response.status);
  console.log("ลบสำเร็จ");
}

• `response.ok` ยังเป็นตัวเช็กหลักเหมือนบทอื่น
• `response.status` ช่วยแยกว่าปลายทางตอบ 200, 202 หรือ 204
• อย่าพยายาม parse JSON ทันทีโดยไม่รู้ก่อนว่า endpoint นี้ตอบ body กลับมาหรือไม่

บาง DELETE response ไม่มี body

จุดต่างสำคัญของ DELETE คือบาง API ตอบกลับแค่สถานะสำเร็จโดยไม่มี body เลย เช่น `204 No Content` ถ้าเราเรียก `response.json()` แบบเหมารวมทุกกรณีอาจเกิด parse error ได้

async function deleteTodoWithOptionalBody(id) {
  const response = await fetch(
    `/api/todos/${id}`,
    { method: "DELETE" }
  );

  if (!response.ok) {
    throw new Error("ลบไม่สำเร็จ");
  }

  if (response.status === 204) {
    return { deleted: true };
  }

  return response.json();
}

• ถ้า API ระบุว่าจะตอบ `204 No Content` ให้คิดไว้ก่อนว่าไม่มี body
• ถ้า API ระบุว่าจะส่ง JSON summary กลับมา ค่อยใช้ `response.json()`
• การอ่าน spec ของ endpoint สำคัญพอ ๆ กับการเขียนโค้ด fetch

ลบข้อมูลแล้วควรทำอะไรต่อใน UI

ในงานจริงการลบสำเร็จมักไม่จบแค่ console log แต่ต้องสะท้อนผลกับ UI ต่อ เช่น เอารายการออกจาก state, redirect, หรือแสดงข้อความยืนยันให้ผู้ใช้เห็น แม้บทนี้ยังไม่ลงลึกเรื่อง state management แต่ควรเห็นภาพว่าผลจาก DELETE มักนำไปสู่ “อัปเดตหน้า” ทันที