HTTP-Client in Angular

Diese Lektion behandelt die Verwendung von Angulars HTTP-Client zur Kommunikation mit APIs, sodass Sie Daten einfach abrufen und senden können.

Was ist der HTTP-Client?

Der HTTP-Client ist Angulars integriertes Modul zur Kommunikation mit Backend-Diensten über HTTP-Anfragen.

HttpClientModule importieren

Importieren Sie HttpClientModule in Ihr Anwendungsmodul, um HTTP-Anfragen verwenden zu können:

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

Eine GET-Anfrage stellen

Verwenden Sie den HTTP-Client, um Daten von einem API-Endpunkt abzurufen:

this.http.get('https://api.example.com/data').subscribe(data => console.log(data));

Antwortdaten verarbeiten

Der HTTP-Client gibt Observables zurück. Abonnieren Sie diese, um Daten asynchron zu verarbeiten:

this.http.get('api/data').subscribe(response => this.data = response);

POST-Anfrage zum Senden von Daten

Senden Sie Daten mit einer POST-Anfrage an den Server:

this.http.post('api/items', newItem).subscribe(result => console.log(result));

Fehlerbehandlung

Verarbeiten Sie Fehler von HTTP-Anfragen mit dem Operator catchError:

this.http.get('api/data').pipe(catchError(error => of('Error occurred'))).subscribe();

Header verwenden

Fügen Sie HTTP-Anfragen Header hinzu, um zusätzliche Informationen zu übermitteln:

const headers = new HttpHeaders().set('Authorization', 'my-auth-token');

Zusammenfassung

Sie haben gelernt, wie Sie Angulars HTTP-Client effektiv verwenden, um Daten mit APIs abzurufen und zu senden. Machen Sie weiter!