Angular Academy · Урок

Функциональные перехватчики

Перехватывайте запросы с помощью функциональных перехватчиков

Урок 1 из 413 шагов

«Функциональные перехватчики» — бесплатный урок Angular Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

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

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

HttpInterceptorFn

В современном Angular используются функциональные перехватчики: HttpInterceptorFn получает запрос и обработчик next, а возвращает наблюдаемый поток событий запроса.

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

export const loggingInterceptor: HttpInterceptorFn = (req, next) => {
  console.log('request to', req.url);
  return next(req);
};

Регистрация с помощью withInterceptors

Предоставьте перехватчики через provideHttpClient(withInterceptors([...])) в конфигурации приложения.

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

export const appConfig = {
  providers: [
    provideHttpClient(withInterceptors([loggingInterceptor]))
  ]
};

Следующий обработчик

Вызовите next(req), чтобы передать запрос дальше по цепочке. Всё, что Вы возвращаете, становится потоком обработки запроса; если не вызвать next, запрос никогда не будет отправлен.

Запросы неизменяемы

HttpRequest неизменяем. Чтобы изменить его, необходимо вызвать clone() с нужными изменениями и передать копию в next.

export const interceptor: HttpInterceptorFn = (req, next) => {
  const cloned = req.clone({ setHeaders: { 'X-App': 'demo' } });
  return next(cloned);
};

Объединение нескольких перехватчиков

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

withInterceptors([authInterceptor, loggingInterceptor, errorInterceptor])
// auth runs first on the way out

Использование inject() внутри перехватчиков

Функциональные перехватчики выполняются в контексте внедрения зависимостей, поэтому Вы можете напрямую использовать службы через inject().

import { inject } from '@angular/core';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).token();
  return next(req); // use token to modify req
};

Проверка ответа

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

import { tap } from 'rxjs';

export const timingInterceptor: HttpInterceptorFn = (req, next) => {
  const start = Date.now();
  return next(req).pipe(
    tap(() => console.log(req.url, Date.now() - start, 'ms'))
  );
};

Условный перехват

Вы можете выбирать ветвь логики по адресу или методу запроса.

export const apiOnly: HttpInterceptorFn = (req, next) => {
  if (!req.url.startsWith('/api')) return next(req);
  const cloned = req.clone({ setHeaders: { 'X-Api': '1' } });
  return next(cloned);
};

Функциональные и классовые перехватчики

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

Взаимодействие перехватчиков на основе DI

Если необходимо использовать устаревшие перехватчики на основе классов, withInterceptorsFromDi() обеспечивает их совместимость. В новом коде предпочтительнее использовать функциональные перехватчики.

provideHttpClient(
  withInterceptors([authInterceptor]),
  withInterceptorsFromDi()
)

Быстрая проверка

Проверьте, насколько хорошо Вы понимаете функциональные перехватчики.

Ответь в интерактивном уроке

Повторение: функциональные перехватчики

Перехватчики централизуют сквозную логику обработки запросов.

HttpInterceptorFn: (req, next) => Observable.
Зарегистрируйте их с помощью withInterceptors([...]).
Клонируйте запросы, чтобы изменить их, и вызывайте next, чтобы продолжить обработку.
Используйте inject() для служб.

Далее: добавление заголовков аутентификации.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 38
Уроки: 144

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Функциональные перехватчики» бесплатный?

Да — полный текст урока «Функциональные перехватчики» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Функциональные перехватчики»?

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

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Функциональные перехватчики»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Angular Academy