Apakah itu HTTP interceptor?

Question

Accepted Answer

**HTTP interceptor** berada di tengah-tengah setiap permintaan/respons `HttpClient`, membolehkan anda memeriksa dan mentransformasinya secara global. Ia merupakan tempat yang sesuai untuk **hal merentas (cross-cutting concerns)** yang terpakai pada semua permintaan — token auth, logging, pengendalian ralat, penunjuk pemuatan.

## Interceptor berfungsi (Angular moden)

```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 satu fungsi `next` (handler seterusnya). Yang penting, permintaan adalah **immutable**, jadi anda perlu `.clone()` dengan perubahan dan bukannya mengubahnya secara terus. Mendaftarkan ini sekali bermakna setiap permintaan keluar secara automatik membawa header auth — tanpa perlu mengulanginya dalam setiap service.

## Mendaftarkan interceptor

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

Beberapa interceptor membentuk satu **rantaian (chain)**, setiap satu menghantar kepada yang seterusnya — susunan penting.

## Mengendalikan respons dan ralat 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);
    })
  );
```

Memandangkan interceptor turut membungkus respons Observable, anda boleh mengendalikan ralat (cth. ubah hala pada 401, papar toast) di **satu tempat** untuk seluruh aplikasi.

## Kegunaan interceptor yang lazim

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

Interceptor memusatkan logik yang sebaliknya akan diduplikasi merentas setiap panggilan HTTP — yang paling penting melampirkan token auth dan mengendalikan ralat secara global.

Ini memastikan service kekal bersih (ia hanya membuat permintaan) dan memastikan tingkah laku yang konsisten di seluruh aplikasi.

Interceptor token-auth dan ralat-global hampir universal dalam aplikasi Angular pengeluaran; mengetahui peraturan clone-untuk-ubah dan model rantaian adalah kunci untuk menulisnya dengan betul.