Abfangjäger in Angular

Einführung

In diesem Artikel erfahren Sie, wie Sie funktionale HTTP-Interceptoren mit Angular 17 verwenden. Interceptors ermöglichen die Manipulation von HTTP-Anfragen und -Antworten und ermöglichen Funktionen wie das Hinzufügen von Headern, Protokollierung, Authentifizierung und vieles mehr.

Was ist ein funktionaler HTTP-Interceptor?

Ein funktionierender HTTP-Interceptor in Angular ist eine Middleware-Funktion, die zum Abfangen und potenziellen Transformieren ausgehender Anfragen und eingehender Antworten verwendet wird. Mit Angular 17 können Sie HttpInterceptorFn verwenden, um funktionierende Interceptors zu erstellen.

Codebeispiel

Hier ist ein einfaches Beispiel, um zu veranschaulichen, wie man einen funktionierenden HTTP-Interceptor erstellt:

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

export const loggingInterceptor: HttpInterceptorFn = (req: HttpRequest<unknown>, next: HttpHandlerFn) => {
  console.log(`Outgoing request to URL: ${req.url}`);
  return next(req).pipe(
    tap(event => {
      if (event instanceof HttpResponse) {
        console.log(`Response received from URL: ${req.url} with status: ${event.status}`);
      }
    })
  );
};

In diesem Beispiel protokolliert der Interceptor die URL jeder ausgehenden Anfrage und die entsprechende Antwort.

Verwendung des Interceptors

Um diesen Interceptor zu verwenden, müssen Sie ihn während der Anwendungsinitialisierung mit „provideHttpClient“ und „withInterceptors:
“ konfigurieren

import { bootstrapApplication } from '@angular/platform-browser';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { AppComponent } from './app/app.component';
import { loggingInterceptor } from './app/http-interceptors/logging-interceptor';

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(withInterceptors([loggingInterceptor]))
  ]
}).catch(err => console.error(err));

Code-Erklärung

• HttpInterceptorFn: Ein Typ, der eine Interceptor-Funktion darstellt.
• HttpRequest: Stellt die HTTP-Anfrage dar.
• HttpHandlerFn: Stellt die nächste Anforderungshandlerfunktion in der Interceptor-Kette dar.
• next(req): Ruft den nächsten Interceptor in der Kette auf oder sendet die Anfrage, wenn es der letzte Interceptor ist.

Abschluss

Funktionale Interceptors in Angular 17 bieten eine flexible und leistungsstarke Möglichkeit, HTTP-Anfragen und -Antworten zu verarbeiten. Sie sind besonders nützlich für funktionsübergreifende Aufgaben wie Authentifizierung, Protokollierung und Fehlerbehandlung.

Weitere Informationen finden Sie in der offiziellen Angular-Dokumentation zu Interceptors.

Das obige ist der detaillierte Inhalt vonAbfangjäger in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!