Angular: Das neue HTTP-Modul

von Sven Ole Lux,
assono GmbH, Standort Kiel,

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

Nächster Artikel in dieser Reihe:

Angular: patchValue führt bei undefinierten Arrays zu Fehlern

Fachbeitrag Web-Entwicklung Angular

Sie haben Fragen zu diesem Artikel? Kontaktieren Sie uns gerne: blog@assono.de

Sie wollen eine individuelle Lösung? Kontaktieren Sie uns

Weitere interessante Artikel

JUNIOR-Landeswettbewerb

JUNIOR-Landeswettbewerb

In der Schule erste Gründungsideen umsetzen - Die bundesweiten JUNIOR-Programme bieten Schülern die Möglichkeit, ihr eigenes Startup … Mehr

von
Katharina Adam
,

Sie haben Fragen? Wir sind für Sie da.

Wenn Sie mehr über unsere Angebote erfahren möchten, können Sie uns jederzeit kontaktieren. Sie können uns auf verschiedene Weisen für eine unverbindliche Erstberatung erreichen:

assono GmbH

Standort Kiel (Zentrale)
assono GmbH
Lise-Meitner-Straße 1–7
24223 Schwentinental

Standort Hamburg
assono GmbH
Bornkampsweg 58
22761 Hamburg

Telefonnummern:
Zentrale: +49 4307 900 407
Techn. Hotline: +49 4307 900 403
Vertrieb: +49 4307 900 402

E-Mail-Adressen:
kontakt@assono.de
bewerbung@assono.de