Да, Angular поддерживает множественные HTTP перехватчики (interceptors). Они позволяют вам обрабатывать все исходящие HTTP-запросы и входящие HTTP-ответы. С помощью перехватчиков вы можете добавлять заголовки, обрабатывать ошибки, логировать запросы и так далее.

Как это работает

Перехватчики являются сервисами, реализующими интерфейс HttpInterceptor. Они могут быть зарегистрированы в массиве providers вашего модуля Angular. Каждый перехватчик будет обрабатывать запросы и ответы в порядке их регистрации.

Пример создания перехватчиков

Вот шаги по созданию двух перехватчиков в Angular:

Создайте первый перехватчик, который будет добавлять заголовок к запросам.

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const clonedRequest = req.clone({
      headers: req.headers.set("Authorization", "Bearer YOUR_TOKEN")
    });
    return next.handle(clonedRequest);
  }
}

Создайте второй перехватчик, который будет логировать информацию о запросах.

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log('Request made with: ', req);
    return next.handle(req);
  }
}

Зарегистрируйте перехватчики в вашем AppModule.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { AuthInterceptor } from './auth.interceptor';
import { LoggingInterceptor } from './logging.interceptor';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Объяснение кода

В каждом из перехватчиков мы реализуем метод intercept для обработки HTTP-запросов.
Первый перехватчик AuthInterceptor добавляет заголовок авторизации к каждому запросу, используя req.clone().
Второй перехватчик LoggingInterceptor просто выводит в консоль информацию о сделанном запросе.
В AppModule мы регистрируем перехватчики, указывая multi: true, что позволяет добавлять несколько перехватчиков.

Заключение

Использование множественных перехватчиков в Angular — это удобный механизм для централизованного управления HTTP-запросами. С их помощью вы можете легко предусмотреть различные функции, такие как аутентификация, логирование и обработка ошибок. Экспериментируйте с их реализацией, чтобы лучше понять их возможности!

Предыдущий вопрос

Что такое мультикастинг?

Следующий вопрос

Как предоставить конфигурацию сборки для нескольких локалей?

Содержание:

Как это работает

Пример создания перехватчиков

Объяснение кода

Заключение

Редактировать