Angular Academy · Lekcja

Funkcyjne interceptory

Przechwytywać żądania za pomocą funkcyjnych interceptorów

Funkcyjne interceptory to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Czym jest interceptor

Interceptor HTTP działa między aplikacją a siecią. Każde żądanie i każda odpowiedź przechodzą przez niego, dzięki czemu można dodawać nagłówki, rejestrować dane, przekształcać je, ponawiać żądania lub obsługiwać błędy w jednym centralnym miejscu.

HttpInterceptorFn

We współczesnym Angularze używa się interceptorów funkcyjnych: HttpInterceptorFn otrzymuje żądanie i handler next, a zwraca observable zdarzeń HTTP.

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

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

Rejestrowanie za pomocą withInterceptors

Interceptory należy dostarczać za pomocą provideHttpClient(withInterceptors([...])) w konfiguracji aplikacji.

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

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

Handler next

Należy wywołać next(req), aby przekazać żądanie dalej w łańcuchu. To, co zostanie zwrócone, staje się przebiegiem obsługi żądania; niewywołanie next oznacza, że żądanie nigdy nie zostanie wysłane.

Żądania są niezmienne

HttpRequest jest niezmienny. Aby go zmodyfikować, należy wywołać clone() z wprowadzonymi zmianami i przekazać kopię do next.

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

Łączenie wielu interceptorów

Interceptory są wykonywane w kolejności z listy. Każdy opakowuje następny, więc tablica tworzy potok: pierwszy interceptor jako pierwszy widzi żądanie, a jako ostatni — odpowiedź.

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

Używanie inject() wewnątrz interceptorów

Interceptory funkcyjne działają w kontekście wstrzykiwania zależności, dlatego można bezpośrednio używać w nich inject() do pobierania usług.

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

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

Sprawdzanie odpowiedzi

Można podłączyć się do zwracanego strumienia, aby obserwować odpowiedzi, na przykład w celu pomiaru czasu lub rejestrowania danych.

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

Warunkowe przechwytywanie

Można rozgałęziać logikę na podstawie adresu URL lub metody żądania, aby stosować ją tylko w wybranych przypadkach.

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

Interceptory funkcyjne a klasowe

Interceptory funkcyjne zastępują starszy, klasowy HttpInterceptor. Są prostsze, podlegają tree-shakingowi, łatwo je testować i rejestruje się je bez tokenów DI.

Współdziałanie z interceptorami opartymi na DI

Jeśli konieczne jest użycie starszych interceptorów klasowych, withInterceptorsFromDi() zapewnia ich integrację. W nowym kodzie należy preferować interceptory funkcyjne.

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

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat interceptorów funkcyjnych.

Podsumowanie: interceptory funkcyjne

Interceptory centralizują wspólną logikę HTTP.

HttpInterceptorFn: (req, next) => Observable.
Należy je rejestrować za pomocą withInterceptors([...]).
Żądania należy klonować przed modyfikacją; aby kontynuować, trzeba wywołać next.
Do usług należy używać inject().

Następnie: dodawanie nagłówków uwierzytelniania.

Często zadawane pytania

Czy lekcja „Funkcyjne interceptory” jest bezpłatna?

Tak — pełny tekst „Funkcyjne interceptory” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Funkcyjne interceptory”?

Przechwytywać żądania za pomocą funkcyjnych interceptorów Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Funkcyjne interceptory”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Angular Academy