اینترسپتورهای HTTP (HTTP Interceptors)

«اینترسپتورهای HTTP انگولار» فیلترهای خط لوله HttpClient هستند. آن ها درخواست ها و پاسخ ها را می بینند. سپس می توانند هدر اضافه کنند، خطاها را مدیریت کنند، یا تلاش دوباره دهند.

مبانی اینترسپتورهای HTTP انگولار

اینترسپتور (Interceptor) یعنی تابعی میانی روی همه درخواست ها. بنابراین یک جا احراز هویت، لاگ، و مدیریت خطا انجام می دهی. در نتیجه کد کامپوننت ها لاغرتر می ماند.

import { provideHttpClient } from '@angular/common/http';
import { withInterceptors } from '@angular/common/http';

const authInterceptor = (req, next) => {
  const cloned = req.clone({ setHeaders: { Authorization: 'Bearer token' } });
  return next(cloned);
};

bootstrapApplication(App, {
  providers: [provideHttpClient(withInterceptors([authInterceptor]))],
});

مشاهده در ادیتور

نوشتن اینترسپتورهای ساده

یک اینترسپتور ساده فقط می خواند و عبور می دهد. همچنین می تواند درخواست را کلون کند و تغییر دهد.

const logInterceptor = (req, next) => {
  console.log(req.method, req.url);
  return next(req);
};

provideHttpClient(withInterceptors([logInterceptor]));

مشاهده در ادیتور

import { HttpInterceptorFn } from '@angular/common/http';

const typedInterceptor: HttpInterceptorFn = (req, next) => {
  const traced = req.clone({ setHeaders: { 'X-Trace': 'demo' } });
  return next(traced);
};

provideHttpClient(withInterceptors([typedInterceptor]));

مشاهده در ادیتور

دموی کامل: اینترسپتورهای HTTP انگولار

در این دمو، یک اینترسپتور لاگ و یک ماک پاسخ می دهند. سپس دکمه، داده ماک را می خواند.

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { provideHttpClient } from '@angular/common/http';
import { withInterceptors } from '@angular/common/http';
import { HttpResponse } from '@angular/common/http';
import { HttpRequest } from '@angular/common/http';
import { HttpHandlerFn } from '@angular/common/http';
import { of } from 'rxjs';
import { JsonPipe } from '@angular/common';

const logInterceptor = (req: HttpRequest<any>, next: HttpHandlerFn) => {
  console.log('Request', req.method, req.url);
  return next(req);
};

const mockInterceptor = (req: HttpRequest<any>, next: HttpHandlerFn) => {
  const isTodo = req.method === 'GET' && req.url.includes('jsonplaceholder.typicode.com/todos/1');
  if (isTodo) {
    const body = { id: 1, title: 'Mocked todo', completed: false };
    return of(new HttpResponse({ status: 200, body }));
  }
  return next(req);
};

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [JsonPipe],
  template: `
    <h3>HTTP Interceptor</h3>
    <button (click)=\"load()\">Load</button>
    <pre>{{ data | json }}</pre>
  `,
})
class App {
  #http = inject(HttpClient);
  data: any;
  load() {
    this.#http
      .get('https://jsonplaceholder.typicode.com/todos/1')
      .subscribe((r) => (this.data = r));
  }
}

bootstrapApplication(App, {
  providers: [provideHttpClient(withInterceptors([mockInterceptor, logInterceptor]))],
});

مشاهده در ادیتور

مدیریت خطا و تلاش دوباره

خطاها را مرکزی مدیریت کن. سپس پیام کاربرپسند بساز. در نهایت فقط درخواست های امن را دوباره تلاش کن.

import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

const errorInterceptor = (req, next) => {
  return next(req).pipe(
    catchError((err) => {
      return throwError(() => err);
    }),
  );
};

provideHttpClient(withInterceptors([errorInterceptor]));

مشاهده در ادیتور

ترتیب اجرا و ترکیب

ترتیب مهم است. درخواست ها به ترتیب جلو می روند. سپس پاسخ ها برعکس برمی گردند. بنابراین ترکیب هایت را آگاهانه بچین.

const auth = (req, next) => {
  const secured = req.clone({ setHeaders: { Authorization: '...' } });
  return next(secured);
};

const log = (req, next) => {
  console.log(req.url);
  return next(req);
};

provideHttpClient(withInterceptors([auth, log]));

مشاهده در ادیتور

گام های عملی

1. یک اینترسپتور بساز و در providers ثبت کن.
2. درخواست را با clone تغییر بده.
3. next را صدا بزن و عبور بده.
4. خطاها را مرکزی map و لاگ کن.
5. ترتیب اینترسپتورها را دقیق بچین.

نکته: اینترسپتور را تک منظوره نگه دار. سپس چند تا را زنجیر کن. همچنین از ذخیره وضعیت متغیر بپرهیز.

جمع بندی سریع

• اینترسپتور یعنی فیلتر سراسری درخواست ها.
• clone برای تغییر درخواست ضروری است.
• ترتیب اجرا کاملاً مهم است.
• خطاها را یکجا مدیریت کن.
• فقط درخواست های امن را retry کن.

مطالب مرتبط: روتر پیشرفته، تزریق وابستگی پیشرفته.