HTTP interceptors શું છે?

Question

Accepted Answer

**HTTP interceptors** દરેક `HttpClient` વિનંતી/પ્રતિસાદની મધ્યમાં બેસે છે, જે તમને તેમને વૈશ્વિક રીતે તપાસવા અને રૂપાંતરિત કરવાની મંજૂરી આપે છે. તે **ક્રોસ-કટિંગ ચિંતાઓ** માટે સંપૂર્ણ સ્થાન છે જે તમામ વિનંતીઓ પર લાગુ થાય છે — auth ટોકન, લોગિંગ, ભૂલ હેન્ડલિંગ, લોડિંગ સૂચકાંકો.

## કાર્યાત્મક ઇન્ટરસેપ્ટર (આધુનિક 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
};
```

ઇન્ટરસેપ્ટર વિનંતી અને `next` ફંક્શન (આગલો હેન્ડલર) પ્રાપ્ત કરે છે. મહત્વપૂર્ણ રીતે, વિનંતીઓ **અપરિવર્તનીય** છે, તેથી તમે પરિવર્તનોના સાથે `.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 ટોકન જોડવું અને ભૂલોને વૈશ્વિક રીતે હેન્ડલ કરવું.

ટીએ સેવાઓ સ્વચ્છ રાખે છે (તેઓ ફક્ત વિનંતીઓ કરે છે) અને પૂરો એપ્લિકેશન એક સુસંગત વર્તન સુનિશ્ચિત કરે છે.

Auth-token અને global-error interceptors ઉત્પાદન Angular એપ્લિકેશનોમાં લગભગ સર્વવ્યાપી છે; clone-to-modify નિયમ અને chain મોડેલ જાણવું તેમને સાચી રીતે લખવા માટે મુખ્ય છે.