Apa itu HTTP interceptors?

Question

Accepted Answer

**HTTP interceptors** duduk di tengah-tengah setiap permintaan/respons `HttpClient`, memungkinkan Anda memeriksa dan mengubahnya secara global. Ini adalah tempat sempurna untuk **kepedulian lintas-cutting** yang berlaku untuk semua permintaan — token auth, logging, penanganan kesalahan, indikator pemuatan.

## Interceptor fungsional (Angular modern)

```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 menerima permintaan dan fungsi `next` (handler berikutnya). Yang penting, permintaan **immutable**, jadi Anda `.clone()` dengan perubahan daripada mutasi. Mendaftarkan ini sekali berarti setiap permintaan keluar secara otomatis membawa header auth — tidak perlu mengulanginya di setiap layanan.

## Mendaftarkan interceptors

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

Multiple interceptors membentuk **chain**, masing-masing melewati ke yang berikutnya — urutan penting.

## Menangani respons dan kesalahan secara global

```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);
    })
  );
```

Karena interceptors membungkus Observable respons juga, Anda dapat menangani kesalahan (misalnya pengalihan pada 401, tampilkan toast) di **satu tempat** untuk seluruh aplikasi.

## Penggunaan interceptor umum

```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
```

## Mengapa ini penting

Interceptors memusatkan logika yang akan diduplikasi di setiap pemanggilan HTTP — terutama melekatkan token auth dan menangani kesalahan secara global.

Ini membuat layanan tetap bersih (mereka hanya membuat permintaan) dan memastikan perilaku yang konsisten di seluruh aplikasi.

Interceptor auth-token dan global-error hampir universal di aplikasi Angular produksi; mengetahui aturan clone-to-modify dan model chain adalah kunci untuk menulisnya dengan benar.