2012-03-07 – PlusMagi's Blog By Pitt Phunsanit

ในโลกของการพัฒนาเว็บสมัยใหม่ การสื่อสารระหว่าง Frontend และ Backend ผ่าน API เป็นหัวใจสำคัญของแอปพลิเคชันเกือบทุกประเภท อย่างไรก็ตาม เมื่อโปรเจกต์ขยายใหญ่ขึ้น เรามักจะพบกับความซ้ำซ้อนในการเขียนโค้ด เช่น การต้องแนบ Token สำหรับการยืนยันตัวตน (Authentication) ในทุกๆ คำสั่ง หรือการจัดการข้อผิดพลาด (Error Handling) ที่เกิดขึ้นจากเซิร์ฟเวอร์ในหลายจุด ซึ่งทำให้โค้ดหลักดูรกและยากต่อการดูแลรักษา

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

Axios Interceptors คือกลไกที่ทรงพลังซึ่งทำหน้าที่เป็นชั้น Middleware สำหรับการร้องขอ (Request) และการตอบกลับ (Response) ของ HTTP โดยมันช่วยให้เราสามารถ “ดักจับ” การทำงานของคำสั่ง API ก่อนที่จะถูกส่งออกไปจริง หรือก่อนที่ข้อมูลจะถึงโค้ดของเราได้ ทำให้เราสามารถแทรก Logic กลางๆ เข้าไปจัดการงานซ้ำๆ ได้อย่างเป็นระบบ

ประโยชน์หลักคือการแยกความรับผิดชอบ (Separation of Concerns) ออกจากส่วนตรรกะทางธุรกิจ (Business Logic) ตัวอย่างเช่น แทนที่เราจะต้องเขียนโค้ดแนบ `Authorization: Bearer ` ในทุกๆ ฟังก์ชัน เราสามารถตั้งค่า Interceptor ให้ทำหน้าที่นี้โดยอัตโนมัติ ทำให้โค้ดของเราสะอาดขึ้นมาก และที่สำคัญคือยังช่วยให้เราจัดการ Global Error เช่น การ Redirect ผู้ใช้ไปยังหน้า Login เมื่อ Token หมดอายุได้อย่างมีประสิทธิภาพ

import axios from ‘axios’; // 1. Request Interceptor: ดักจับก่อนส่งคำขอ axios.interceptors.request.use( (config) => { const token = localStorage.getItem(‘authToken’); if (token) { config.headers[‘Authorization’] = `Bearer ${token}`; // แนบ Token อัตโนมัติ } return config; }, (error) => Promise.reject(error) ); // 2. Response Interceptor: ดักจับหลังได้รับคำตอบ axios.interceptors.response.use( (response) => { console.log(‘API Call Success!’); return response; }, (error) => { if (error.response && error.response.status === 401) { // จัดการกรณี Token หมดอายุหรือไม่มีสิทธิ์ alert(‘Session Expired. Please log in again.’); localStorage.removeItem(‘authToken’); window.location.href = ‘/login’; // Redirect ไปหน้า Login } return Promise.reject(error); } );

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

การจัดการ Authentication (Auth Token): ใช้ Interceptor เพื่อให้มั่นใจว่าทุกคำขอ API จะมี Header ของ Access Token ที่ถูกต้องโดยอัตโนมัติ ทำให้โค้ดส่วนที่เรียกใช้ API ไม่ต้องกังวลเรื่องการแนบ Token ซ้ำๆ
Global Error Handling และ Logging: สามารถดักจับ Response ที่มีสถานะผิดพลาด (เช่น 403 Forbidden หรือ 500 Internal Server Error) เพื่อแสดงข้อความแจ้งเตือนที่เป็นมิตรต่อผู้ใช้ หรือส่งข้อมูล Log ไปยังระบบ Monitoring ได้ทันที โดยไม่ต้องเขียน `try…catch` ในทุกฟังก์ชัน

การทำความเข้าใจและใช้งาน Axios Interceptors ไม่ได้เป็นเพียงแค่เทคนิคทางโค้ดเท่านั้น แต่เป็นการยกระดับแนวคิดในการออกแบบสถาปัตยกรรมซอฟต์แวร์ให้มีความเป็นระเบียบ (Clean Architecture) มากขึ้น มันสอนให้เรามองหา “จุดที่ควรจะรวมศูนย์” ของ Logic ต่างๆ เพื่อให้ระบบของเราสามารถขยายตัวได้อย่างง่ายดาย มีความทนทานต่อข้อผิดพลาด และบำรุงรักษาได้ในระยะยาว

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