Angular Academy · Lektion

Funktionale Interceptors

Anfragen mit funktionalen Interceptors abfangen

Funktionale Interceptors ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist ein Interceptor

Ein HTTP-Interceptor sitzt zwischen Ihrer Anwendung und dem Netzwerk. Jede Anfrage und jede Antwort durchläuft ihn, sodass Sie Header hinzufügen, protokollieren, transformieren, wiederholen oder Fehler an einer zentralen Stelle behandeln können.

HttpInterceptorFn

Modernes Angular verwendet funktionale Interceptors: Eine HttpInterceptorFn erhält die Anfrage und einen next-Handler und gibt ein Observable von HTTP-Ereignissen zurück.

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

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

Mit withInterceptors registrieren

Stellen Sie Interceptors über provideHttpClient(withInterceptors([...])) in Ihrer App-Konfiguration bereit.

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

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

Der nächste Handler

Rufen Sie next(req) auf, um die Anfrage an die nächste Stelle in der Kette weiterzugeben. Der Rückgabewert wird zum Ablauf der Anfrage; wenn Sie next nicht aufrufen, wird die Anfrage nie gesendet.

Anfragen sind unveränderlich

HttpRequest ist unveränderlich. Um die Anfrage zu ändern, müssen Sie sie mit Ihren Anpassungen über clone() klonen und den Klon an next übergeben.

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

Mehrere Interceptors verketten

Interceptors werden in der angegebenen Reihenfolge ausgeführt. Jeder umschließt den nächsten, sodass das Array eine Pipeline bildet: Der erste sieht die Anfrage zuerst und die Antwort zuletzt.

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

inject() in Interceptors verwenden

Funktionale Interceptors werden in einem Injection-Kontext ausgeführt, sodass Sie Services direkt mit inject() beziehen können.

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

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

Die Antwort untersuchen

Greifen Sie auf den zurückgegebenen Stream zu, um Antworten zu beobachten, beispielsweise für Zeitmessungen oder Protokollierung.

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

Bedingte Interception

Sie können anhand der URL oder der Methode der Anfrage verzweigen, um Logik gezielt anzuwenden.

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

Funktionale und klassenbasierte Interceptors

Funktionale Interceptors ersetzen den älteren klassenbasierten HttpInterceptor. Sie sind einfacher, tree-shakable und leicht zu testen und werden ohne DI-Tokens registriert.

Zusammenspiel mit DI-basierten Interceptors

Wenn Sie Legacy-Interceptors auf Klassenbasis verwenden müssen, stellt withInterceptorsFromDi() die Verbindung her. Für neuen Code sollten Sie funktionale Interceptors bevorzugen.

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

Kurzer Check

Testen Sie Ihr Verständnis funktionaler Interceptors.

Zusammenfassung: Funktionale Interceptors

Interceptors bündeln übergreifende HTTP-Logik an einer zentralen Stelle.

HttpInterceptorFn: (req, next) => Observable.
Registrieren Sie sie mit withInterceptors([...]).
Klonen Sie Anfragen, um sie zu ändern, und rufen Sie next auf, um fortzufahren.
Verwenden Sie inject() für Services.

Als Nächstes: Auth-Header hinzufügen.

Häufig gestellte Fragen

Ist die Lektion „Funktionale Interceptors“ kostenlos?

Ja — der vollständige Text von „Funktionale Interceptors“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Funktionale Interceptors“?

Anfragen mit funktionalen Interceptors abfangen Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Funktionale Interceptors“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Angular Academy