Angular Interceptors за 2 минуты..

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

Что такое перехватчики?

Перехватчики — это промежуточный слой, который находится между приложением Angular и HTTP-клиентом. Это функции, которые могут выполняться до отправки запроса на сервер или после получения ответа от сервера. Основная цель перехватчиков — изменить запрос или ответ до того, как он достигнет сервера или клиента.

Перехватчики реализованы как классы, реализующие интерфейс HttpInterceptor. Этот интерфейс определяет два метода: intercept() и handleError(). Метод intercept() вызывается перед отправкой запроса на сервер, а метод handleError() вызывается, если во время запроса возникает ошибка.

Как работают перехватчики?

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

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

Как использовать перехватчики в приложении Angular

Чтобы использовать перехватчики в приложении Angular, вам нужно создать класс, реализующий интерфейс HttpInterceptor. Этот класс должен определить метод intercept(), который будет вызываться перед отправкой запроса на сервер.

Метод intercept() принимает два аргумента: объект HttpRequest, который представляет отправляемый запрос, и объект HttpHandler, который представляет следующий обработчик в цепочке. Метод intercept() может изменить запрос, например, добавив заголовки или параметры запроса, прежде чем передать его следующему обработчику в цепочке.

Например, давайте создадим новый класс, реализующий интерфейс HttpInterceptor:

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

@Injectable()
export class CustomHeaderInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    const customReq = req.clone({
      headers: req.headers.set('Custom-Header', 'Custom-Header-Value')
    });
    return next.handle(customReq);
  }
}

В этом примере мы создали перехватчик с именем CustomHeaderInterceptor, который добавляет настраиваемый заголовок с именем Custom-Header к каждому HTTP-запросу, сделанному приложением.

Метод intercept принимает два аргумента: объект HttpRequest и объект HttpHandler. Сначала мы создаем новый объект HttpRequest, вызывая метод clone для исходного объекта запроса. Затем мы устанавливаем значение Custom-Header, используя метод set объекта заголовков.

Наконец, мы возвращаем следующий обработчик в цепочке, вызывая next.handle(customReq).

Далее нам нужно зарегистрировать наш перехватчик в HTTP-клиенте Angular, добавив его в массив provider в файле app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import { AppComponent } from './app.component';
import { CustomHeaderInterceptor } from './custom-header.interceptor';

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

В этом примере мы импортируем HttpClientModule и регистрируем CustomHeaderInterceptor с помощью HTTP-клиента Angular, добавляя его в массив поставщиков.

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

Заключение

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

Я публикую упрощенные статьи, если вам нравится такой формат, подписывайтесь🙏.

Присоединяйтесь к моей профессиональной сети, подключившись к LinkedIn! https://www.linkedin.com/in/sandeep-sn/