การส่ง HTTP PUT, PATCH และ DELETE ด้วย Axios แทน jQuery AJAX

ในโลกของการพัฒนาเว็บแอปพลิเคชันสมัยใหม่ การสื่อสารระหว่าง Client และ Server ผ่าน API ถือเป็นหัวใจสำคัญที่กำหนดประสบการณ์ของผู้ใช้งานทั้งหมด นักพัฒนาจำเป็นต้องจัดการกับคำขอข้อมูล (Requests) ที่หลากหลายรูปแบบ ไม่ว่าจะเป็นการสร้าง, การอ่าน, การอัปเดต หรือการลบข้อมูล ซึ่งแต่ละการกระทำเหล่านี้ถูกนิยามด้วยมาตรฐาน RESTful Architecture และต้องการเครื่องมือที่ทันสมัยและมีประสิทธิภาพในการส่งคำสั่งเหล่านั้น

เจาะลึกรายละเอียดและประเด็นสำคัญ

การทำความเข้าใจ HTTP Methods อย่าง PUT, PATCH และ DELETE เป็นสิ่งจำเป็นสำหรับนักพัฒนาที่ต้องการสร้างแอปพลิเคชันที่มีโครงสร้างตามหลัก RESTful API โดยเฉพาะอย่างยิ่ง การใช้ Axios เข้ามาแทนที่ jQuery AJAX นั้น ไม่ใช่แค่การเปลี่ยนไลบรารี แต่เป็นการยกระดับวิธีการจัดการ Asynchronous JavaScript ให้มีความทันสมัยกว่า มีระบบ Promise ที่ชัดเจน และรองรับคุณสมบัติขั้นสูง เช่น Interceptors ซึ่งช่วยให้โค้ดสะอาดและบำรุงรักษาได้ง่ายขึ้นมาก

ความแตกต่างที่สำคัญคือ PUT ใช้สำหรับการแทนที่ทรัพยากรทั้งหมด (Idempotent) ส่วน PATCH ใช้สำหรับการอัปเดตเฉพาะส่วนของข้อมูลเท่านั้น ซึ่งการแยกแยะความแตกต่างนี้อย่างถูกต้องในการเขียนโค้ดเป็นสิ่งสำคัญมาก เพราะมันส่งผลต่อทั้งประสิทธิภาพและความสมบูรณ์ของข้อมูลในฐานข้อมูล การใช้ Axios ทำให้เราสามารถกำหนด Method และ Body ของ Request ได้อย่างตรงไปตรงมาและมี Type Safety ที่ดีกว่า

const axios = require('axios');

// 1. PUT (แทนที่ข้อมูลทั้งหมด)
async function updateResource(id, data) {
  try {
    const response = await axios.put(`https://api.example.com/users/${id}`, data);
    console.log("PUT Success:", response.data);
  } catch (error) {
    console.error("Error updating resource:", error);
  }
}

// 2. PATCH (อัปเดตเฉพาะบางฟิลด์)
async function partialUpdate(id, updates) {
  try {
    const response = await axios.patch(`https://api.example.com/users/${id}`, updates);
    console.log("PATCH Success:", response.data);
  } catch (error) {
    console.error("Error partially updating resource:", error);
  }
}

// 3. DELETE (ลบทรัพยากร)
async function deleteResource(id) {
  try {
    const response = await axios.delete(`https://api.example.com/users/${id}`);
    console.log("DELETE Success:", response.status); // มักจะคืนค่า 204 No Content
  } catch (error) {
    console.error("Error deleting resource:", error);
  }
}

// ตัวอย่างการเรียกใช้:
// updateResource(1, { name: "New Name", email: "[email protected]" });

การนำไปประยุกต์ใช้ในชีวิตและการทำงานยุคใหม่

การจัดการ Token และ Authentication ด้วย Interceptors: แทนที่จะต้องใส่ Header ของ Authorization Token ในทุกๆ Request เราสามารถใช้ Axios Interceptor เพื่อดักจับและแนบ Token เข้าไปในทุกคำขอขาออก (Outgoing Requests) ได้โดยอัตโนมัติ ทำให้โค้ดหลักของเราสะอาดขึ้นมากและลดโอกาสเกิดข้อผิดพลาดในการจัดการ Session
การทำ Global Error Handling: เราสามารถใช้ Response Interceptor เพื่อตรวจสอบสถานะโค้ด (Status Code) ทั่วทั้งแอปพลิเคชันได้ เช่น หาก API คืนค่า 401 Unauthorized เสมอ เราสามารถ Redirect ผู้ใช้ไปยังหน้า Login ได้ทันที โดยไม่ต้องเขียน `try…catch` สำหรับการจัดการ Auth ในทุกฟังก์ชัน

โดยสรุปแล้ว การเปลี่ยนมาใช้ Axios เพื่อจัดการ HTTP Methods ที่ซับซ้อนอย่าง PUT, PATCH และ DELETE ไม่เพียงแต่ช่วยให้โค้ดของเราทันสมัยตามมาตรฐาน JavaScript (ES6+) เท่านั้น แต่ยังเป็นการยกระดับสถาปัตยกรรมการสื่อสารข้อมูลทั้งหมดของแอปพลิเคชันให้มีความทนทาน (Robust), มีประสิทธิภาพสูง, และง่ายต่อการขยายระบบในอนาคตอย่างแท้จริง

อ่านเพิ่มเติม