Http “Interception” in Angular 2


Wenn man in Angular 1 Requests und Responses verändern will, ist dies sehr einfach mit der Hilfe von Interceptoren lösbar. Ich habe hier einige benutzerdefinierte Interceptoren erstellt die einem das Leben schon sehr einfach machen konnten. Wenn es darum ging den IE vom Caching der Ajax Requests abzuhalten oder um zu zählen wie viele offene Requests aktuell noch vorhanden sind um einen kleinen Spinner anzuzeigen, das gerade noch etwas geladen wird, …

Leider ist dies in Angular 2 nicht mehr so einfach möglich, oder sagen wir mal so es ist etwas umständlicher möglich, denn leider bietet Angular 2 aktuell keinen so komfortablen weg, wie ihn Angular 1 geboten hat.

In Angular 2 müssen wir dafür die Http Klasse “erweitern”. Damit wir die Benutzerdefinierte Implementierung unserer Http Klasse auch in anderen Projekten verwenden können ohne diese jedes mal selbst anzupassen, verwende ich noch rxjs Subjects, damit kann man die spezielle Implementierung unserer Lösungen an anderer Stelle aufrufen (Subscriben). Die Implementierung kann hier z.B. folgendermaßen aussehen:

In der CustomHttp Klasse findet keine direkte Implementierung statt, sondern es wird ein Service Injected der selbst rxjs Subjects für “jedes” Problem bereitstellt, was ich in meinen Webseiten kenne und für das ich teilweise andere Lösungen bereitstelle, wie z.B. was mache ich wenn ein Serverfehler auftritt. Ich habe hier aktuell nur die “No-Cache” Header fest eingebunden, da ich diese immer benötige. Sonst ruft man hier nur die passenden Service Funktionen auf und diese triggern dann das rxjs Subject, welches an anderer Stelle abonniert werden kann.

Der “httpSubjectService” kann dann z.B. in der “app.component” (Root Komponente) eingebunden werden und man subscribed das jeweils passende Subject und kann die passende Implementierungen dann entsprechend aufrufen.

Damit aber die CustomHttp Erweiterung überhaupt geladen werden kann muss die benutzerdefinierte Implementierung registriert werden im Dependency Injector (sehr gute Hilfe die erklärt wie die Dependency Injection in Angular 2 funktioniert) von Angular 2 und man überschreibt damit die Standardimplementierung von Http mit der CustomHttp Implementierung.

Natürlich darf man nicht vergessen das “CustomHttpCoreModule” im “app.module” zu registrieren.

Ein komplettes Beispiel auf meinem Github Account.

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s