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` ఫంక్షన్ (తదుపరి హ్యాండ్లర్)ను అందుకుంటుంది. కీలకంగా, అభ్యర్థనలు **మార్పులేనివి**, కాబట్టి మీరు మార్పులతో `.clone()` చేస్తారు, మరియు మార్పుకు బదులుగా. దీనిని ఒకసారి నమోదు చేయడం అంటే ప్రతి వెళ్లే అభ్యర్థన స్వయంచాలకంగా ఆధిక్షేత్ర హెడర్ను కలిగి ఉందని అర్థం — ప్రతి సేవలో దీనిని పునరావృత్తి చేయకుండా.

## Interceptors నమోదు చేయడం

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

కई interceptors **చেయిన్** ఏర్పరుస్తాయి, ప్రతిదీ తదుపరిదానికి పాస్ చేస్తుంది — క్రమం విషయం.

## ప్రతిస్పందనలు మరియు లోపాలను ప్రపంచవ్యాప్తంగా నిర్వహించడం

```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 వద్ద రీడైరెక్ట్, టోస్ట్ చూపించు) నిర్వహించవచ్చు.

## 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 కాల్‌లలో ఉపసంహరించుకుంటుంది — చాలా ముఖ్యమైనది అధిక్షేత్ర టోకెన్‌లను సంattach చేయడం మరియు లోపాలను ప్రపంచవ్యాప్తంగా నిర్వహించడం.

ఇది సేవలను శుభ్రంగా ఉంచుతుంది (అవి కేవలం అభ్యర్థనలను చేస్తాయి) మరియు మొత్తం యాప్‌లో సামంజస్యపూర్ణ ప్రవర్తన సాధిస్తుంది.

అధిక్షేత్ర-టోకెన్ మరియు ప్రపంచ-లోపం interceptorsమీద ఉత్పత్తి Angular యాప్‌లలో దాదాపుగా సార్వత్రికమైనవి; clone-to-modify నియమం మరియు చెయిన్ మॉడెల్‌ను తెలుసుకోవడం వాటిని సరిగ్గా రాయడానికి సముచితంగా ఉంటుంది.