Seit dem 4.3.0-Release von Angular vom 08.07.2017 gibt es ein neues HTTP-Modul: Das HttpClientModule. Dieses neue Modul ersetzt das alte Modul komplett und kann wesentlich einfacher und mit weniger Code benutzt werden.
Das veraltete HTTPModule wird noch einige Zeit im Funktionsumfang von Angular 2 enthalten bleiben, um nun langsam auf das neue HttpClientModule migrieren zu können. Wenn möglich, sollte direkt das neue Modul benutzt werden.
Das neue Modul lässt sich nun unter @angular/common/http finden.
…
//Altes Modul ersetzen...
import { HttpModule } from '@angular/http';
//...durch neues Modul:
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent
],
imports: [
//Altes Modul ersetzen...
HttpModule,
//...durch neues Modul:
HttpClientModule
],
})Bei einem Aufruf der HTTP-Methode hat sich nun einiges geändert.
Es wird keine .map()-Methode mehr auf die HTTP-Methoden benötigt, da der HTTP-Client zunächst immer von einem Json als Rückgabewert ausgeht.
Von den HTTP-Methoden wird ein Observable zurückgegeben.
//Altes Modul
this.http.get('/api/users')
.map(response => response.json())
//Neues Modul
this.http.get('/api/users');Mit der Methode .subscribe() können wir uns auf den Rückgabewert des gets abonnieren, da es sich hierbei um ein Observable handelt. Wird das Observable an keiner Stelle von .subscribe() abboniert, wird die get-Methode niemals ausgelöst.
this.http.get('/api/users')
.subscribe(
data => {
console.log(data);
});Innerhalb dieses subscribe können wir nun unsere Daten verarbeiten.
Die Methode extractData(), mit welcher wir die Daten im alten Modul verarbeitet haben, gibt es in diesem Modul nicht mehr. Wir können innerhalb des data => { } unsere Daten verarbeiten
Beispielsweise können wir die Daten in einem Objekt abspeichern.
object;
this.http.get('/api/users')
.subscribe(
data => {
this.object = data;
console.log(data);
});Zusätzlich kann ein einer HTTP-Methode auch Optionen übergeben werden. Beispielsweise der erwartete Wiedergabetyp: Text.
this.http.get('/api/users',{ResponseType: 'text' })
.subscribe(
data => {
console.log(data);
});Um Fehler abzufangen, gibt es die Möglichkeit, eine weitere Lambdafunktion anzugeben, die auf die Fehler reagiert.
this.http.get('/api/users')
.subscribe(
data => { ... }),
err => {
console.log("Error occured.")
} ;Da es sich bei err um ein Objekt der Klasse HttpErrorResponse handelt, können wir beispielsweise über if-Abfragen die verschiedenen HTTP-Statuscodes unterscheiden und unterschiedlich auf diese reagieren.
this.http.get('/api/users')
.subscribe(
data => { ... }),
err => {
console.log("Error occured. " + err.status)
} ;
