Angular-Anleitung für Anfänger: HTTP Anfragen

German (Deutsch) translation by Ahmet Öztürk (you can also view the original English article)

Wenn Sie auf der Suche nach Angular-Schulungsmaterial sind, haben Sie Glück. Dieses Lehrmaterial zu Angular auf Deutsch wird Ihnen helfen, in kürzester Zeit loszulegen! Bei Angular HTTP geht es darum, die richtigen Techniken einzusetzen, um eine einseitige Angular HTML Anwendung zu erstellen, die HTTP-Anfragen erstellt und HTTP-Antworten auf einfache und skalierbare Weise verarbeitet. Das Paket @angular/common/http enthält einen Client, einen Interceptor und viele weitere Funktionen für Ihre Angular-Anwendung.

Single Page Applikationen müssen oft skaliert werden, und das Framework muss die richtige Mischung aus Tools und Techniken bieten, um dies zu unterstützen. Angular verfügt über viele eingebaute Tools, um anständig zu skalieren. Heute lernen Sie, wie Sie eine grundlegende Architektur für HTTP-Anfragen in Ihrer Anwendung einrichten und wie Sie Abfangmechanismen verwenden, um Ihre Anwendung skalierbar zu halten.

Groß oder klein, jede Angular-Anwendung wird einen Strom von HTTP-Anfragen haben. Sie werden HTTP-Anfragen senden und empfangen. Wie würden Sie Regeln anwenden und den Ablauf Ihrer Anfragen ändern? Interceptors sind Angular-Dienste, mit denen Sie dies erreichen können. Wie der Name schon sagt, können Sie jede gesendete Anfrage oder empfangene Antwort abfangen. Sie sind in der Lage, die Werte der Anfrage hinzuzufügen oder zu ändern.

Aber bevor Sie sich an HTTP-Abfangmechanismen (Interceptors) wagen, müssen Sie die Grundlagen von HTTP in Angular kennen.

Die Grundstruktur des Projekts

Bevor wir loslegen, möchte ich Ihnen die Gesamtstruktur des Projekts vorstellen. Sie finden das fertige Projekt live in diesem GitHub Repository.

    -src
		--app
        ----child
        ------child.component.ts
        ----parent
        ------parent.component.ts
        ------parent.service.ts
        ----utility
        ------header.interceptor.ts
        ------response.interceptor.ts
        ------error.interceptor.ts
        ----app-routing.module.ts
        ----app.component.css
        ----app.component.ts
        ----app.module.ts
        --assets

1. Ihr Projekt für HTTP vorbereiten

HttpClient ist eine eingebaute Service-Klasse aus dem Angular-Paket: @angular/common/http. Wenn Sie in Angular über ein HTTP-Protokoll kommunizieren wollen, können Sie fetch oder XMLHttpRequest verwenden. In jedem Fall erfolgt die Kommunikation über HttpClient. Diese Serviceklasse verfügt über viele interessante Signaturen und Rückgabetypen.

Interessante Merkmale des HttpClient sind:

Ausführen von GET, POST, PUT und DELETE Anfragen
So können Sie alle Ihre Fehlerbehandlungsstrategien optimieren
Fangen Sie jede gesendete HTTP-Anfrage oder empfangene Antwort ab
Erstellen Sie typisierte Anfrage- oder Antwortobjekte
Einführen von RxJS Observablen

Schritt 1: Importieren von `HttpClient` in app.module.ts

Um HttpClient verwenden zu können, müssen Sie das HttpClientModule in Ihrer app.module.ts Datei importieren. Und dies sollte Teil des Arrays imports in Ihrem NgModule sein.

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { HttpClientModule } from '@angular/common/http';
    
    @NgModule({
        imports: [BrowserModule, HttpClientModule],
        .
        .
        providers: []
    })
    export class AppModule { }

Mit der obigen Deklaration sind Sie bereit, den HttpClient in Ihren Komponenten zu verwenden. Um auf den HttpClient in einer Komponente zuzugreifen, müssen Sie einen Service erstellen, und zwar einen Injectable Service. Für unseren Zweck werden wir einen Dienst erstellen, der auf Root-Ebene injiziert werden kann.

Schritt 2: Erstellen eines injizierbaren Dienstes

Ein Injectable ist ein Dekorator, der in Angular verwendet werden kann. Er wird mit Metadaten wie provideIn geliefert. Wenn provideIn auf root gesetzt ist, können Sie den Dienst in Ihrer gesamten Anwendung verwenden. Die Komponente sollte nach dem Dienst definiert werden. Wenn die Komponente vor einem Dienst definiert wird, wird zur Laufzeit ein Nullreferenzfehler ausgegeben.

Jeder injizierbare Dienst hat das folgende Grundgerüst. In unserem Beispielprojekt finden Sie einen injizierbaren Service in der Datei parent.service.ts. Er bietet alle APIs, die von parent.component.ts.

    import { HttpClient } from  '@angular/common/http';
    import { Injectable } from  '@angular/core';
    
    @Injectable({
        providedIn:  'root'
    })
    
    export class HttpService {
        constructor(private https: HttpClient) { }
    }

Nun lassen Sie uns das obige Skelett verbessern und dafür sorgen, dass es Daten von einer API abruft. Wenn Sie neu im Bereich HTTP sind, haben wir einen großartigen Beitrag, der Ihnen hilft, die Grundlagen zu erlernen.

    import { HttpClient, HttpHeaders } from  '@angular/common/http';
    import { Injectable } from  '@angular/core';
    import {HttpParams} from "@angular/common/http";
    
    @Injectable({
        providedIn:  'root'
    })
    
    export class ParentHttpService {
    
        private url = 'https://reqres.in/api/users';
    
        constructor(private http: HttpClient) { }
    
        getUsers() {
            return this.http.get(this.url);
        }
    
        // ...
    }

Schritt 3: Verwendung der Injectable Services

In unserer Datei parent.service.ts finden Sie viele Getter-API-Aufrufe. Diese APIs werden von parent.component.ts aus aufgerufen. Werfen wir einen kurzen Blick auf parent.component.ts, die für den Aufruf der Methoden in parent.service.ts verwendet wird.

Was wir hier erreichen wollen, ist eine Injektion des Dienstes, der zum Abrufen von Benutzern erstellt wurde.

Wir abonnieren die Methode des Dienstes.
In dem Moment, in dem wir diese Methode ausführen, werden wir die GET-Anfrage ausführen und das Antwort-/Fehlerobjekt empfangen.

In unserem Beispiel haben wir drei verschiedene Schaltflächen, die jeweils auf eine andere Methode im injizierbaren Dienst verweisen.

    import { Component } from '@angular/core';
    import { ParentHttpService } from './parent.service';
    
    @Component({
        selector: 'parent',
        template: `
        <div>
            <h3>Parent Page</h3>
            <div>Get All Users <button (click)="getAllUsers()">Get All Users</button></div>
            <div>Get users in page 2 <button (click)="getUserInPageTwo()">Get Items on Page 2</button></div>
            <div>Get users in page 2 with custom Header <button (click)="getUsersOnAPageWithHeaders()">Get users in page 2 with custom Header</button></div>
            <div>Users:</div>
            <div>{{users}}</div>
        </div>
        `,
    })
    export class ParentComponent {
    
        users : any;
    
        constructor(private httpService: ParentHttpService) { }
    
        ngOnInit() {}
    
        getAllUsers = () => {
            this.httpService.getUsers().subscribe(
            (response) => { this.users = JSON.stringify(response); },
            (error) => { console.log(error); });
            }
        getUserInPageTwo = () => {
        this.httpService.getUsersOnAPage(2).subscribe(
            (response) => { this.users = JSON.stringify(response); },
            (error) => { console.log(error); });
        }
        getUsersOnAPageWithHeaders = () => {
        this.httpService.getUsersOnAPageWithHeaders(2).subscribe(
            (response) => { this.users = JSON.stringify(response); },
            (error) => { console.log(error); });
        }
        
    }

Die obige Komponente sieht wie folgt aus. Im Screenshot habe ich auf die Schaltfläche Alle Benutzer abrufen geklickt und die Ergebnisse wurden erfolgreich angezeigt.

Schritt 4: Konfigurieren eines `HttpInterceptor`

Wie bereits erwähnt, können Sie die Werte einer beliebigen Anfrage hinzufügen oder ändern. In einer Anwendung können Sie mehrere Interceptoren haben. Deshalb ist es wichtig, dass Sie den Interceptor als Provider in app.module.ts registrieren. Wenn der Interceptor hier nicht registriert ist, kann er die Anfragen, die wir über den HttpClient-Dienst stellen, nicht abfangen.

Einer der Interceptoren in unserem Projekt befindet sich in utility/header.interceptor.ts. Und wir müssen es in app.module.ts importieren.

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
    
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { ParentHttpService } from './parent/parent.service';
    import { HeaderInterceptor } from './utility/header.interceptor';
    
    @NgModule({
        declarations: [
        AppComponent
        ],
        imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule
        ],
        providers: [ { provide: HTTP_INTERCEPTORS, useClass: HeaderInterceptor, multi: true }, ParentHttpService],
        bootstrap: [AppComponent]
    })
    export class AppModule { }
    

Die Syntax für das Hinzufügen von Interceptoren in Ihrer @NgModule Konfiguration lautet:

1	providers: [{ provide: HTTP_INTERCEPTORS, useClass: <Name des Interceptors>, multi: true }]

Schritt 5: Erstellen des `HttpInterceptors`

Um einen Interceptor zu erstellen, muss die Schnittstelle HttpInterceptor, die in @angular/common/http verfügbar ist, implementiert werden. Jedes Mal, wenn Ihre Angular-Anwendung über den HttpClient-Dienst eine Anfrage stellt oder eine Antwort über das HTTP-Protokoll erhält, wird die intercept-Methode des Interceptors aufgerufen.

Die Methode intercept hat folgende Struktur:

Input: nimmt einen Verweis auf das httpRequest Objekt entgegen
Purpose: inspiziert und modifiziert das httpRequest Objekt nach Bedarf
Output: ruft next.handle mit dem modifizierten httpRequest

Schritt 6: Abfangen des Headers

Weil wir das Abfangen gelernt haben, fügen wir allen unseren API-Anfragen einen Header hinzu. Hier fügen wir eine neue Kopfzeile namens ANGULAR_TUTS_INTERCEPTOR zu unserer get-Anfrage hinzu. Wie bereits erwähnt, können wir im Code mehrere Interceptoren verwenden. Vergessen Sie nicht, den Interceptor richtig zu benennen, damit Sie den Code besser identifizieren und pflegen können.

    //app.interceptor.ts
    import { Injectable } from '@angular/core';
    import { HttpInterceptor, HttpEvent, HttpResponse, HttpRequest, HttpHandler, HttpErrorResponse } from '@angular/common/http';
    import { Observable } from 'rxjs';
    
    @Injectable()
    export class HeaderInterceptor implements HttpInterceptor {
        intercept(httpRequest: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
        console.log("Inside Intercept");     
        const ANGULAR_TUTS_INTERCEPTOR = '123456';
        return next.handle(httpRequest.clone({ setHeaders: { ANGULAR_TUTS_INTERCEPTOR } }));
        }
    }

Hier ist ein Screenshot des Headers, der in unsere GET-Anfrage eingefügt wird.

die Kopfzeile, die in unserer GET-Anfrage enthalten ist.

Schritt 7: Abfangen des Antwortkörpers

Neben dem Abfangen der Kopfzeile einer Anfrage können wir auch den Antwortkörper verändern. Den Code zum Abfangen des Antwortkörpers finden Sie in response.interceptor.ts. Hier verwenden wir die HttpResponse und fügen einen neuen Parameter namens projectCode in den Body ein. Wenn die Antwort in unserer Komponente gedruckt wird, sehen Sie projectCode in der Ausgabe.

Mit dem neuen ResponseInterceptor sieht unsere app.module.ts wie folgt aus:

    providers: [ 
        { provide: HTTP_INTERCEPTORS, useClass: ResponseInterceptor, multi: true }, 
        { provide: HTTP_INTERCEPTORS, useClass: HeaderInterceptor, multi: true }
        ParentHttpService
    ]

    //response.interceptor.ts
    import { Injectable } from '@angular/core';
    import { HttpInterceptor, HttpEvent, HttpResponse, HttpRequest, HttpHandler } from '@angular/common/http';
    import { Observable } from 'rxjs';
    import { map } from 'rxjs/operators'
    
    @Injectable()
    export class ResponseInterceptor implements HttpInterceptor {
        intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(req).pipe(
            map((event: HttpEvent<any>) => {
                if (event instanceof HttpResponse) {
                    event = event.clone({ body: this.handleResponse(event) })
                }
                return event;
            })
        )
        }
        private handleResponse(event: any): any {
            //  override http response body here
            const body = { ...event.body, "projectCode": "angular_tuts_http" };
            return body;
        }  
    }

In diesem Screenshot können Sie den Response Interceptor in Aktion sehen. Wir haben projectCode hervorgehoben, um den neu hinzugefügten Parameter in der Antwort zu zeigen.

Schritt 8: Fehler Behandlung

Interceptoren helfen uns, Fehler besser zu behandeln. Eine API gibt nicht immer das erwartete Ergebnis zurück. Manchmal, wenn der Server nicht erreichbar ist oder die Anfrage nicht den richtigen Body enthält, werden Sie zwangsläufig einen Fehler erhalten. Aus diesem Grund ist die Fehlerbehandlung extrem wichtig. In unserer Datei error.interceptor.ts haben wir eine einfache Logik für die Fehlerbehandlung hinzugefügt. Die API-Anfrage wird viermal wiederholt, bis der letzte Fehler an die Komponente ausgegeben wird.

Einer der wichtigsten Aspekte in diesem Code ist die Verwendung von RxJS. Später in diesem Tutorial werden wir sehen, warum RxJS wichtig ist.

Wir müssen app.module.ts mit dem neuen ErrorInterceptor verbessern. Die Datei sieht wie folgt aus.

    providers: [ 
        { provide: HTTP_INTERCEPTORS, useClass: ResponseInterceptor, multi: true }, 
        { provide: HTTP_INTERCEPTORS, useClass: HeaderInterceptor, multi: true }, 
        { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }, 
        ParentHttpService
    ]

    import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
    import { Injectable } from '@angular/core';
    import { of, throwError } from 'rxjs';
    import { concatMap, delay, retryWhen } from 'rxjs/operators';
    
    @Injectable()
    export class ErrorInterceptor implements HttpInterceptor {
        retryCount = 3;
        retryWaitTime = 1000;
        intercept(req: HttpRequest <any>, next: HttpHandler) {
            return next.handle(req).pipe(
                retryWhen(error =>
                    error.pipe(
                        concatMap((error, count) => {
                            if (count <= this.retryCount && error.status == 404) {
                                return of(error);
                            }
                            return throwError(error);
                        }),
                        delay(this.retryWaitTime)
                    )
                )
            );
        }
    }

Hier ist ein Screenshot, der das Verhalten von error.interceptor.ts. zeigt. Wie Sie sehen können, wird dieselbe API-Anfrage auf der Registerkarte Netzwerk mehrfach gestellt.

Tipps und Tricks zur Verwendung von @angular/common/http

`HttpParams`

HTTP Get kann mehrere Query String Parameter haben. Hier ist ein einfaches Beispiel:

1	https://reqres.in/api/users?page=2

In dem obigen Ausschnitt gibt es einen Query-String-Parameter: page = 2. Mit dem Paket @angular/common/http können Sie ganz einfach Query String Parameter hinzufügen. Um dies zu erreichen, müssen Sie HttpParams aus dem Paket importieren. HttpParams ist unveränderlich. Alle API-Methoden, die mit HttpParams verknüpft sind, führen zu keinerlei Objektveränderung. Deshalb müssen wir den Aufruf der Methode set verketten. Wenn Sie versuchen, HttpParams auf andere Weise zu setzen, wird das nicht funktionieren. Stattdessen erhalten Sie ein leeres HttpParams Objekt.

    //parent.service.ts
    import {HttpParams} from "@angular/common/http";
    
    //CHAINING
    const params = new HttpParams()
            .set('page', pageNo)
    
    return this.http.get(this.url, {params})
        
    //DOES NOT WORK
    params.set('page', 'pageNo"')

Was würden Sie tun, wenn die URL aus vorhandenen Query-String-Parametern besteht? In diesem Fall können Sie fromString verwenden. fromString ist ein Teil von HttpParams, und hier sehen Sie, wie Sie ihn verwenden können:

1	const params = new HttpParams({
2	fromString: 'page=2'
3	});

`HttpHeaders`

Als nächstes wollen wir verstehen, wie man HTTP-Header liest und setzt. Wenn Sie noch nicht mit HTTP vertraut sind, empfehlen wir Ihnen, unseren Post über HTTP zu lesen.

HTTP-Header machen bei jeder HTTP-Anfrage oder -Antwort einen großen Unterschied. Einige Header werden automatisch in die Anfrage eingefügt, andere können Sie selbst in die Anfrage einfügen. Um dies zu erreichen, müssen Sie die Klasse HttpHeaders aus @angular/common/http verwenden. Genau wie HttpParams ist auch HttpHeaders unveränderlich.

    const headers = new HttpHeaders()
        .set("Content-Type", "application/json");
        const params = new HttpParams()
        .set('page', pageNo)
        
    return this.http.get(this.url, {headers, params})

RxJS

Die Aufgabe von RxJS besteht darin, sicherzustellen, dass pro Subscription nur eine HTTP-Anfrage gestellt wird. In Ihrem Code kann es häufig zu doppelten Anfragen kommen. Dies beeinträchtigt die Leistung und kann sogar zum Abbruch Ihrer Anwendung führen. Wenn Sie möchten, dass Daten nur einmal vom Back-End abgefragt werden, sollten Sie RxJS verwenden.

Auch wenn HTTP-Anfragen parallel erfolgen und die Ergebnisse kombiniert werden müssen, können wir forkJoin aus der RxJS-Bibliothek verwenden.

Wenn Sie möchten, dass Ihre HTTP-Anfragen in einer Reihenfolge ausgeführt werden und das Ergebnis der ersten Anfrage zum Aufbau der zweiten Anfrage verwendet werden soll, können Sie switchMap verwenden. Dies sind nur zwei der häufigen Anwendungsfälle für RxJS.

Ein weiterer wichtiger Aspekt von RxJS sind die Operatoren. Diese Bibliothek bietet Operatoren wie map und filter, die zusammen mit next.handle verwendet werden können.

Abschluss

Wir sind am Ende dieses Tutorials über Angular HTTP angelangt. Das Stellen von Anfragen und das Warten auf Antworten ist ein unvermeidlicher Schritt in jeder einseitigen Anwendung. Es ist wichtig, eine skalierbare Anwendung zu bauen, die einfach zu warten ist. Nutzen Sie die Bibliothek @angular/common/http zusammen mit RxJS, um den HTTP-Workflow Ihres Clients zu erstellen.