HTTP interceptors क्या हैं?

Question

Accepted Answer

**HTTP interceptors** हर `HttpClient` अनुरोध/प्रतिक्रिया के बीच में बैठते हैं, जो आपको उन्हें विश्व स्तर पर निरीक्षण और रूपांतरित करने देते हैं। ये **क्रॉस-कटिंग चिंताओं** के लिए सही जगह हैं जो सभी अनुरोधों पर लागू होती हैं — auth tokens, लॉगिंग, त्रुटि हैंडलिंग, लोडिंग संकेतक।

## एक कार्यात्मक 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` फ़ंक्शन (अगला हैंडलर) प्राप्त करता है। महत्वपूर्ण बात यह है कि अनुरोध **immutable** हैं, इसलिए आप उन्हें बदलने की बजाय `.clone()` के साथ बदलाव करते हैं। इसे एक बार पंजीकृत करने का मतलब है कि हर बाहर जाने वाला अनुरोध स्वचालित रूप से auth हेडर ले जाता है — इसे हर सेवा में दोहराने की आवश्यकता नहीं है।

## Interceptors पंजीकृत करना

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

कई interceptors एक **chain** बनाते हैं, प्रत्येक अगले को पास करता है — क्रम महत्वपूर्ण है।

## प्रतिक्रियाओं और त्रुटियों को विश्व स्तर पर संभालना

```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 पर रीडायरेक्ट करें, toast दिखाएं) **एक जगह** पूरे ऐप के लिए।

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

## यह महत्वपूर्ण क्यों है

Interceptors तर्क को केंद्रीभूत करते हैं जो अन्यथा हर HTTP कॉल में डुप्लिकेट होता — सबसे महत्वपूर्ण रूप से auth tokens को संलग्न करना और त्रुटियों को विश्व स्तर पर संभालना।

यह सेवाओं को स्वच्छ रखता है (वे सिर्फ अनुरोध करते हैं) और पूरे ऐप में सुसंगत व्यवहार सुनिश्चित करता है।

Auth-token और global-error interceptors production Angular ऐप्स में लगभग सार्वभौमिक हैं; clone-to-modify नियम और chain मॉडल को जानना उन्हें सही तरीके से लिखने की कुंजी है।