HTTP interceptors के के हुन्?

Question

Accepted Answer

**HTTP interceptors** हरू `HttpClient` को हरेक request/response को मध्यमा बस्छन्, जसले तपाईंलाई तिनीहरूलाई विश्वव्यापी रूपमा निरीक्षण र रूपान्तर गर्न दिन्छ। तिनीहरू **cross-cutting concerns** को लागि उत्तम स्थान हुन् जो सबै request हरूमा लागु हुन्छन् — auth tokens, logging, error handling, loading indicators।

## एक functional 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
};
```

इन्टरसेप्टरले request र `next` function (अगलो handler) प्राप्त गर्छ। महत्त्वपूर्ण रूपमा, request हरू **immutable** हुन्छन्, त्यसैले तपाई परिवर्तन गरी `.clone()` गर्नुहुन्छ बजाय mutation गर्ने। यो एक पटक निबन्धन गरेमा हरेक आउँदो request स्वचालित रूपमा auth header बहन गर्छ — प्रत्येक service मा यो दोहोरिनु पर्दैन।

## Interceptors को निबन्धन

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

बहुविध interceptors एक **chain** बनाउँछन्, हरेकले अगलोमा पास गर्छ — order महत्त्वपूर्ण छ।

## Response र error लाई विश्वव्यापी रूपमा हेरफेर गर्दै

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

इन्टरसेप्टरले response Observable पनि लपेट्छ, तपाई error (जस्तै 401 मा redirect, toast देखाउन) **एक स्थान** मा सम्पूर्ण app को लागि हेरफेर गर्न सक्नुहुन्छ।

## सामान्य 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
```

## यो किन महत्त्वपूर्ण छ

इन्टरसेप्टरले logic लाई केन्द्रीकृत गर्छ जो अन्यथा हरेक HTTP call भर दोहोरिइन्छ — सबैभन्दा महत्त्वपूर्ण रूपमा auth tokens जोड्नु र error हरू विश्वव्यापी रूपमा हेरफेर गर्नु।

योले services लाई स्वच्छ राख्छ (तिनीहरूले केवल request बनाउँछन्) र सम्पूर्ण app मा सुसंगत व्यवहार सुनिश्चित गर्छ।

auth-token र global-error interceptors production Angular apps मा लगभग-सार्वभौमिक छन्; clone-to-modify rule र chain model जान्नु तिनीहरूलाई सही रूपमा लेख्नको लागि महत्त्वपूर्ण छ।