Apa iku HTTP interceptors?

Question

Accepted Answer

**HTTP interceptors** dumunung ing tengahe saben `HttpClient` request/response, ngidini sampeyan ngrampingake lan ngganti-ganti dheweke sacara global. Dheweke dadi papan sing sempurna kanggo **cross-cutting concerns** sing diterapake ing kabeh requests — auth tokens, logging, error handling, loading indicators.

## A functional interceptor (modern 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 nampa request lan fungsi `next` (handler sabanjure). Sing penting, requests iku **immutable**, mula sampeyan `.clone()` karo owah-owahan tinimbang ngganti. Nandaftar iki mula berarti saben request sing metu kanthi otomatis nggawa auth header — ora perlu mbaleni ing saben service.

## Nandaftar interceptors

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

Multiple interceptors nggawe **chain**, saben menehi marang sing sabanjure — urutan penting.

## Nangani responses lan errors kanthi 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);
    })
  );
```

Samarga interceptors mbungkus response Observable uga, sampeyan bisa nangani errors (contone redirect ing 401, nampilake toast) ing **siji papan** kanggo kabeh app.

## Kegunaan interceptor sing 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 penting

Interceptors nutupake logika sing biyen bakal dirangkep ing saben HTTP call — paling penting nglekak auth tokens lan nangani errors kanthi global.

Iki nggawe services resik (dheweke mung nggawe requests) lan mesthekake tingkah laku sing konsisten ing kabeh app.

Auth-token lan global-error interceptors mah meh universal ing production Angular apps; ngerti clone-to-modify rule lan chain model penting banget kanggo nulis dheweke kanthi bener.