HTTP interceptors คืออะไร

Question

Accepted Answer

**HTTP interceptors** นั่งอยู่ตรงกลางของทุก `HttpClient` คำขอ/การตอบสนอง ให้คุณตรวจสอบและแปลงพวกมันตามระดับโลก พวกเขาเป็นสถานที่ที่สมบูรณ์แบบสำหรับ **ปัญหาด้านความเกี่ยวข้อง** ที่ใช้กับทุกคำขอ — โทเค็นการรับรองความถูกต้อง การบันทึก การจัดการข้อผิดพลาด ตัวบ่งชี้การโหลด

## interceptor เชิงฟังก์ชัน (Angular สมัยใหม่)

```ts
import { HttpInterceptorFn } from "@angular/common/http";
import { inject } from "@angular/core";

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).getToken();

// requests are immutable — CLONE to modify
  const authReq = req.clone({
    setHeaders: { Authorization: `Bearer ${token}` }, // attach token to EVERY request
  });

return next(authReq); // pass the (modified) request along the chain
};
```

Interceptor ได้รับคำขอและฟังก์ชัน `next` (ตัวจัดการถัดไป) สิ่งสำคัญคือ คำขอเป็น **immutable** ดังนั้นคุณ `.clone()` ที่มีการเปลี่ยนแปลง แทนที่จะกลายพันธุ์ การลงทะเบียนครั้งนี้เพียงครั้งเดียวหมายความว่าทุกคำขอขาออกนั้นนำส่วนหัวการรับรองความถูกต้องโดยอัตโนมัติ — โดยไม่ต้องทำซ้ำในแต่ละบริการ

## การลงทะเบียน interceptors

```ts
bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(withInterceptors([authInterceptor, errorInterceptor, loggingInterceptor])),
  ],
});
```

Interceptors หลายตัวสร้าง **chain** โดยแต่ละตัวส่งผ่านไปยังตัวถัดไป — ลำดับมีความสำคัญ

## การจัดการการตอบสนองและข้อผิดพลาดตามระดับโลก

```ts
import { catchError } from "rxjs/operators";
import { throwError } from "rxjs";

export const errorInterceptor: HttpInterceptorFn = (req, next) =>
  next(req).pipe(
    catchError((err) => {
      if (err.status === 401) inject(Router).navigate(["/login"]); // global 401 handling
      inject(NotificationService).showError(err.message);
      return throwError(() => err);
    })
  );
```

เนื่องจาก interceptors ยังห่อ Observable การตอบสนองไว้ด้วย คุณสามารถจัดการข้อผิดพลาด (เช่น เปลี่ยนเส้นทางที่ 401 แสดง toast) ใน **สถานที่เดียว** สำหรับแอปทั้งหมด

## การใช้งาน interceptor ทั่วไป

```text
✓ Attach auth tokens to requests
✓ Global error handling (401 → login, show notifications)
✓ Logging / analytics of all HTTP traffic
✓ Show/hide a global loading spinner
✓ Add common headers, retry logic, caching
```

## ทำไมจึงสำคัญ

Interceptors รวมตรรกะที่อย่างอื่นจะถูกทำซ้ำในทุกการเรียก HTTP — สิ่งสำคัญที่สุดคือการแนบโทเค็นการรับรองความถูกต้องและการจัดการข้อผิดพลาดตามระดับโลก

สิ่งนี้ช่วยให้บริการสะอาด (พวกเขาเพียงแค่ทำคำขอ) และรับประกันพฤติกรรมที่สม่ำเสมอทั่วทั้งแอป

โทเค็นการรับรองความถูกต้องและ interceptors ข้อผิดพลาดทั่วโลกแทบจะเป็นสากลในแอป Angular ในการผลิต การรู้กฎ clone-to-modify และแบบจำลอง chain เป็นกุญแจสำคัญในการเขียนพวกมันอย่างถูกต้อง