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

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

Настройка вашего проекта Angular

Во-первых, убедитесь, что у вас установлен Angular CLI. Если нет, вы можете установить его с помощью npm:

npm install -g @angular/cli

Теперь создайте новый проект Angular:

ng new Project_Name
cd Project_Name

Теперь создайте новый перехватчик HTTP с помощью Angular CLI:

ng generate interceptor interceptors/interceptorName

При этом будут созданы два файла: interceptorName.interceptor.ts и interceptorName.interceptor.spec.ts в каталоге src/app/interceptors.

Теперь откройте interceptorName.interceptor.ts и добавьте логику для вашего перехватчика. Вот пример регистрации сообщения.

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

export const interceptorName: HttpInterceptorFn = (req, next) => {
  console.log('HTTP Request:', req);
  return next(req);
};

Теперь, чтобы использовать перехватчик, откройте app.config.ts и добавьте его в массив поставщиков:

...
import { provideHttpClient,withInterceptors } from '@angular/common/http';
import { interceptorName } from './interceptors/interceptorName.interceptor';


export const appConfig: ApplicationConfig = {
  providers: [
    ....
    provideHttpClient(
      withInterceptors([interceptorName])
    ),
  ],
};

Расширенные варианты использования Angular Interceptors

Пользовательское преобразование запросов и ответов

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

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

export const apiInterceptor: HttpInterceptorFn = (req, next) => {
  const modifiedReq = req.clone({
    body: { title:"Modified Request Body",id: 1 },
  });
  return next(modifiedReq);
};

Издевательство над сценариями тестирования

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

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

export const eventLoggingInterceptor: HttpInterceptorFn = (req, next) => {
    // Mock response for testing
    if (req.url.endsWith('/test')) {
    const mockResponse = { id: 1, title: 'Test Data' };
    return of(new HttpResponse({ status: 200, body: mockResponse }));
  }
    // Pass through to actual HTTP request
    return next(req);
}

Обработка ошибок и механизмы повторных попыток

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

import { HttpInterceptorFn } from '@angular/common/http';
import { catchError,retry, throwError } from 'rxjs';

export const apiInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req).pipe(
    retry(3), // Retry failed requests up to 3 times
    catchError((error) => {
      console.error('HTTP Error:', error);
      return throwError(error);
    })
  );
};

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

Объединение перехватчиков в цепочку и контроль порядка выполнения

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

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

// First Interceptor: Authentication
export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const authReq = req.clone({
    setHeaders: {
      Authorization: `Bearer YOUR_TOKEN`
    }
  });
  return next(authReq);
};

// Second Interceptor: Logging
export const loggingInterceptor: HttpInterceptorFn = (req, next) => {
  console.log('Request URL:', req.url);
  return next(req).pipe(
    tap(event => {
      if (event instanceof HttpResponse) {
        console.log('Response Status:', event.status);
      }
    })
  );
};

// Third Interceptor: Error Handling
export const errorHandlingInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req).pipe(
    retry(3),
    catchError((error) => {
      console.error('HTTP Error:', error);
      return throwError(error);
    })
  );
};

// Registering Interceptors in Angular Module

export const appConfig: ApplicationConfig = {
  providers: [
    ...
    provideHttpClient(
      withInterceptors([apiInterceptor,loggingInterceptor,errorHandlingInterceptor])
    ),
  ],
};

Обработка событий и взаимодействие с DOM

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

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

export const eventLoggingInterceptor: HttpInterceptorFn = (req, next) => {
  document.addEventListener('click', (event) => {
    console.log('Click event intercepted:', event);
    // Additional custom event handling logic
  });
  return next(req);
};

Перехват с использованием внешнего инструмента

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

Requestly — один из таких мощных инструментов, который улучшает рабочий процесс разработки. Например, предположим, что вы разрабатываете приложение и вам нужно проверить, как оно справляется с медленным ответом сети.

• Установка и настройка: легко установите Requestly в качестве расширения для браузера и настройте правила для перехвата и изменения HTTP-запросов и ответов.
• Управление правилами: определение наборов правил и управление ими на основе URL-адресов, заголовков или параметров запроса для перехвата запросов в соответствии с определенными критериями.
• Модификация запроса: изменяйте запросы, добавляя заголовки, переписывая URL-адреса или перенаправляя запросы на основе предопределенных правил, что упрощает сценарии динамического тестирования и отладки.
• Расширенные варианты использования: используйте Requestly для моделирования различных ответов сервера, имитации конечных точек в целях тестирования или обеспечения соблюдения определенных условий сети во время разработки.

Заключение

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