HTTP interceptors کیا ہیں؟

Question

Accepted Answer

**HTTP interceptors** ہر `HttpClient` درخواست/جواب کے درمیان بیٹھتے ہیں، جو آپ کو انہیں عام طور پر معائنہ اور تبدیل کرنے دیتے ہیں۔ وہ **cross-cutting concerns** کے لیے بہترین جگہ ہیں جو تمام درخواستوں پر لاگو ہوتے ہیں — 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
};
```

Interceptor درخواست اور ایک `next` فنکشن (اگلا handler) موصول کرتا ہے۔ اہم بات یہ ہے کہ درخواستیں **immutable** ہیں، اس لیے آپ تبدیلیوں کے ساتھ `.clone()` کرتے ہیں بجائے اس کے کہ mutate کریں۔ اس کو ایک بار رجسٹر کرنے کا مطلب ہے کہ ہر باہر جانے والی درخواست خودکار طور پر auth header لے کر جائے — ہر service میں اسے دہرانے کی ضرورت نہیں۔

## 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 response Observable کو بھی لپیٹتے ہیں، آپ غلطیوں کو سنبھال سکتے ہیں (مثلاً 401 پر ری ڈائریکٹ کریں، 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
```

## اس کا کیوں اہم ہے

Interceptors اس منطق کو centralize کرتے ہیں جو ورنہ ہر HTTP call میں duplicate ہوتی — سب سے اہم auth tokens attach کرنا اور errors کو عام طور پر سنبھالنا۔

یہ services کو صاف رکھتا ہے (وہ صرف درخواستیں کرتے ہیں) اور پوری app میں مطابقت رکھنے والے behavior کو یقینی بناتا ہے۔

Auth-token اور global-error interceptors production Angular apps میں لگ بھگ آفاقی ہیں؛ clone-to-modify rule اور chain model کو جاننا انہیں صحیح طریقے سے لکھنے کے لیے اہم ہے۔