ในโลกของการพัฒนาเว็บแอปพลิเคชันสมัยใหม่ การสื่อสารระหว่าง Client-Side และ Server-Side ผ่าน RESTful API ถือเป็นหัวใจหลักของระบบทั้งหมด นักพัฒนามักต้องจัดการกับคำสั่ง HTTP ที่หลากหลาย ไม่ว่าจะเป็นการสร้าง (POST), การอ่าน (GET), หรือที่สำคัญคือการแก้ไขข้อมูลบางส่วนหรือลบข้อมูล ซึ่งในอดีตเครื่องมืออย่าง jQuery’s $.ajax() เคยเป็นมาตรฐานในการจัดการเรื่องนี้ แต่เมื่อ JavaScript มีความก้าวหน้าและมี API พื้นฐานที่ทันสมัยกว่าเข้ามาแทนที่ การทำความเข้าใจวิธีการเรียกใช้คำสั่งเหล่านี้ด้วย Fetch API จึงเป็นทักษะสำคัญที่นักพัฒนาทุกคนควรทราบ
เจาะลึกรายละเอียดและประเด็นสำคัญ
หัวใจของการทำงานกับ HTTP PUT, PATCH และ DELETE คือการทำความเข้าใจว่าแต่ละคำสั่งมีวัตถุประสงค์ที่แตกต่างกันอย่างไร PUT ใช้สำหรับการแทนที่ทรัพยากรทั้งหมด (Full Replacement) ส่วน PATCH ใช้สำหรับการอัปเดตข้อมูลบางส่วนเท่านั้น (Partial Update) และ DELETE ใช้สำหรับการลบทรัพยากร การใช้ Fetch API ทำให้เราสามารถกำหนด `method` และส่งข้อมูล Payload ไปยัง Endpoint ได้อย่างเป็น Native โดยอาศัย Promise-based structure ซึ่งทำให้การจัดการ Asynchronous Code มีความสะอาดและอ่านง่ายกว่าเดิมมาก
ข้อได้เปรียบที่ชัดเจนที่สุดคือการลด Dependency และการใช้มาตรฐานของ JavaScript อย่างเต็มรูปแบบ แทนที่จะพึ่งพาไลบรารีภายนอกอย่าง jQuery ในงานพื้นฐานด้าน Networking การใช้ Fetch API ทำให้โค้ดของเรามีความกระชับ ทันสมัย และสอดคล้องกับแนวทางปฏิบัติที่ดีที่สุด (Best Practices) ของ Web Development ยุคปัจจุบัน
Plain Text
const API_URL = 'https://api.example.com/users';
// 1. PUT (แทนที่ข้อมูลทั้งหมด)
async function putData(id, data) {
try {
const response = await fetch(`${API_URL}/${id}`, {
method: 'PUT', // กำหนด Method เป็น PUT
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});
if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
return await response.json();
} catch (error) {
console.error("Error performing PUT:", error);
}
}
// 2. PATCH (อัปเดตข้อมูลบางส่วน)
async function patchData(id, updates) {
try {
const response = await fetch(`${API_URL}/${id}`, {
method: 'PATCH', // กำหนด Method เป็น PATCH
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(updates),
});
if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
return await response.json();
} catch (error) {
console.error("Error performing PATCH:", error);
}
}
// 3. DELETE (ลบข้อมูล)
async function deleteData(id) {
try {
const response = await fetch(`${API_URL}/${id}`, {
method: 'DELETE', // กำหนด Method เป็น DELETE
});
if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
// สำหรับการลบ มักจะคืนค่า 204 No Content
return response.status === 204 ? true : await response.json();
} catch (error) {
console.error("Error performing DELETE:", error);
}
}
// ตัวอย่างการเรียกใช้:
// putData(1, { name: "New Name", email: "[email protected]" });