Что такое HTTP-интерцепторы?

Question

Accepted Answer

**HTTP-интерцепторы** находятся посередине каждого запроса/ответа `HttpClient`, позволяя вам глобально проверять и преобразовывать их. Они идеальное место для **cross-cutting concerns**, применяемых ко всем запросам — токены авторизации, логирование, обработка ошибок, индикаторы загрузки.

## Функциональный интерцептор (современный 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
};
```

Интерцептор получает запрос и функцию `next` (следующий обработчик). Критически важно, что запросы **неизменяемы**, поэтому вы используете `.clone()` с изменениями вместо мутации. Регистрация этого один раз означает, что каждый исходящий запрос автоматически несет заголовок auth — без повторения в каждом сервисе.

## Почему это важно

```ts
bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(withInterceptors([authInterceptor, errorInterceptor, loggingInterceptor])),
  ],
});
```

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

## Обработка ответов и ошибок глобально

```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);
    })
  );
```

Поскольку интерцепторы оборачивают Observable ответа, вы можете обрабатывать ошибки (например, перенаправление на 401, показ toast) в **одном месте** для всего приложения.

## Типичные применения интерцепторов

```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
```

## Почему это важно

Интерцепторы централизуют логику, которая иначе была бы продублирована во всех HTTP-запросах — в первую очередь присоединение токенов авторизации и глобальная обработка ошибок.

Это сохраняет сервисы чистыми (они просто делают запросы) и обеспечивает согласованное поведение по всему приложению.

Интерцепторы auth-token и global-error почти универсальны в production Angular-приложениях; знание правила clone-to-modify и модели цепи критически важны для их правильного написания.