ป้ายกำกับ: Axios

Axios Interceptors: การดักจับ Request และ Response (เช่น การแนบ Auth Token อัตโนมัติทุกคำสั่ง)Axios Interceptors: การดักจับ Request และ Response (เช่น การแนบ Auth Token อัตโนมัติทุกคำสั่ง)

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

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

💡 หลักการทำงานของ Interceptors: การแยกความรับผิดชอบ (Separation of Concerns)

หัวใจสำคัญของ Interceptors คือการแยกส่วนตรรกะทางธุรกิจ (Business Logic) ออกจากส่วนของการจัดการโครงสร้างพื้นฐาน (Infrastructure Logic) แทนที่เราจะต้องเขียนโค้ดแนบ Header `Authorization: Bearer ` ซ้ำๆ ในทุกๆ ฟังก์ชัน เราเพียงแค่ตั้งค่า Interceptor ให้ทำหน้าที่นี้โดยอัตโนมัติ

🛠️ การจำลองแนวคิด Interception ด้วย PostgreSQL (Database Middleware)

แม้ว่า Axios จะเป็นไลบรารี JavaScript แต่แนวคิดของ Interception นั้นเทียบได้กับ Middleware ในระดับสถาปัตยกรรม ซึ่งในโลกของฐานข้อมูล เราสามารถจำลองแนวคิดนี้ได้ด้วย Database Triggers หรือ Stored Procedures ที่ทำงานก่อน (BEFORE) หรือหลัง (AFTER) การดำเนินการหลัก นี่คือตัวอย่างการจำลองการตรวจสอบ Token ก่อนการดำเนินการใน PostgreSQL:

SQL

-- สมมติว่าเรามีฟังก์ชันที่ทำหน้าที่ตรวจสอบสิทธิ์ก่อนการ INSERT ข้อมูลหลัก<br>CREATE OR REPLACE FUNCTION check_auth_token(user_id INT, required_token TEXT) RETURNS BOOLEAN AS $$<br>BEGIN<br>    -- Logic การตรวจสอบ Token (เทียบเท่า Request Interceptor)<br>    IF required_token IS NULL OR required_token != 'valid-secret-token' THEN<br>        RAISE EXCEPTION 'Authentication Failed: Missing or invalid token.';<br>    END IF;<br>    RETURN TRUE;<br>END;$$ LANGUAGE plpgsql;<br>

-- การสร้าง Trigger เพื่อให้ฟังก์ชันทำงานก่อนการ INSERT<br>CREATE TRIGGER before_user_insert<br>BEFORE INSERT ON users<br>FOR EACH ROW<br>EXECUTE FUNCTION check_auth_token(NEW.user_id, 'valid-secret-token');

ในตัวอย่างนี้ before_user_insert ทำหน้าที่เหมือน Request Interceptor ที่บังคับให้ต้องมีการตรวจสอบสิทธิ์ (Token) ก่อนที่คำสั่ง INSERT จะถูกดำเนินการ ซึ่งทำให้โค้ดหลักของเราสะอาดและปลอดภัยขึ้นมาก

🚀 การใช้งานจริง: การจัดการ Token และ Error Global

1. Request Interceptor: ใช้สำหรับแนบข้อมูลที่จำเป็น (เช่น Token, Header) เข้าไปในทุกคำขอที่ออกไปโดยอัตโนมัติ
2. Response Interceptor: ใช้สำหรับจัดการการตอบกลับระดับ Global เช่น หาก API คืนค่า 401 (Unauthorized) เราสามารถดักจับได้ทันทีและทำการ Redirect ผู้ใช้ไปยังหน้า Login โดยไม่ต้องเขียนโค้ดจัดการ 401 ซ้ำๆ ในทุกหน้า

การใช้ Interceptors ทำให้โค้ดของเรามีโครงสร้างแบบโมดูลาร์ (Modular) และลดความซ้ำซ้อน (DRY – Don’t Repeat Yourself) ได้อย่างยอดเยี่ยม ทำให้ทีมพัฒนาสามารถโฟกัสกับ Business Logic ได้เต็มที่

✅ บทสรุปสำหรับสถาปนิก

Axios Interceptors ไม่ใช่แค่ฟีเจอร์ แต่คือรูปแบบการออกแบบ (Design Pattern) ที่ช่วยยกระดับคุณภาพของโค้ดให้เป็นมาตรฐานระดับ Enterprise Architect มันช่วยให้เราสร้างชั้นป้องกัน (Middleware Layer) ที่จัดการงานโครงสร้างพื้นฐานทั้งหมด ทำให้แอปพลิเคชันของเรามีความเสถียร ปลอดภัย และพร้อมสำหรับการขยายตัวในอนาคต