X'inhuma HTTP interceptors?

Question

IT Interview Practice · Accepted Answer

**HTTP interceptors** jinstelgħu fin-nofs ta' kull talba/rispons ta' `HttpClient`, u jippermettulek tinfetaħ u ttrasforma lilhom globalment. Huma l-post perfett għal **cross-cutting concerns** li japplikaw għal-talba kollha — auth tokens, logging, error handling, loading indicators.

## An interceptor funzjonali (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
};
```

L-interceptor jirċievi l-talba u funzjoni `next` (l-handler sussegwenti). Importantement, it-talba huma **immutable**, għalhekk tuża `.clone()` bi ċanġamenti minflok li timmodifika direttament. Ir-reġistrazzjoni ta' dan darba waħda tfisser li kull talba ħarġa awtomatikament iċċarried l-auth header — ebda ripetizzjoni fiha fil-kull servizz.

## Ir-reġistrazzjoni ta' interceptors

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

Intercettors multipli jiffurmaw **chain**, u kull waħda tgħaddi lit-tiegħa l-ġejja — l-ordni hija importanti.

## Il-ħolqien ta' rispons u errors globalment

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

Minkejja li l-interceptors ilaħħqu r-rispons Observable ukoll, tista' tħaddem errors (eż. redirect fuq 401, uri toast) f'**post wieħed** għall-app bħala sħiħ.

## L-użi komuni ta' interceptors

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

## Għaliex hija importanti

L-interceptors icentrralizzaw il-loġika li kienet altriment ikollha tiġi dduplikata fuq kull HTTP talba — l-aktar importantement li taċċatta auth tokens u tħaddem errors globalment.

Dan iżomm il-servizzi nadif (huma biss jagħmlu talba) u jiżgura kompurtament konsistenti fl-app bħala sħiħ.

L-auth-token u global-error interceptors huma quasi-universali f'apps ta' Angular tal-produzzjoni; li taf ir-regola ta' clone-to-modify u l-mudell ta' chain hija fundamentali biex tiktibhom b'mod korrett.

An interceptor funzjonali (modern Angular)

Ir-reġistrazzjoni ta' interceptors

Il-ħolqien ta' rispons u errors globalment

L-użi komuni ta' interceptors

Għaliex hija importanti

Mistoqsijiet relatati