Mit welchem können Sie einen nachgebildeten Webdienst erstellen, um die Angular 4-App zu testen?
angular
angular-httpclient
angular2-http
Aiyoub Amini
quelle
quelle
Antworten:
Verwenden Sie die
HttpClient
Klasse von,HttpClientModule
wenn Sie Angular 4.3.x und höher verwenden:Es ist eine verbesserte Version der
http
vom@angular/http
Modul mit den folgenden Verbesserungen:Wie es funktioniert, finden Sie im Insider-Handbuch zu Interceptors und HttpClient-Mechanik in Angular .
In Zukunft wird der alte http-Client nicht mehr unterstützt. Hier sind die Links zur Commit-Nachricht und den offiziellen Dokumenten .
Achten Sie auch darauf, dass altes http mithilfe eines
Http
Klassentokens anstelle des neuen injiziert wurdeHttpClient
:Außerdem
HttpClient
scheint es zurtslib
Laufzeit neu zu sein, sodass Sie es installierennpm i tslib
und aktualisieren müssen,system.config.js
wenn Sie Folgendes verwendenSystemJS
:Und Sie müssen ein weiteres Mapping hinzufügen, wenn Sie SystemJS verwenden:
quelle
node_modules
Ordner entfernen undnpm install
erneut ausführen'@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
Ich möchte mich nicht wiederholen, sondern nur auf andere Weise zusammenfassen (Funktionen, die im neuen HttpClient hinzugefügt wurden):
Ich habe einen Artikel geschrieben, in dem ich den Unterschied zwischen altem "http" und neuem "HttpClient" behandelt habe. Ziel war es, dies so einfach wie möglich zu erklären.
Einfach über den neuen HttpClient in Angular
quelle
Dies ist eine gute Referenz, die mir geholfen hat, meine http-Anfragen auf httpClient umzustellen
https://blog.hackages.io/angular-http-httpclient-same-but-different-86a50bbcc450
Es vergleicht die beiden hinsichtlich der Unterschiede und gibt Codebeispiele.
Dies sind nur einige Unterschiede, mit denen ich mich befasst habe, als ich in meinem Projekt die Dienste auf httpclient geändert habe (aus dem Artikel, den ich erwähnt habe):
Importieren
Antwort anfordern und analysieren:
@ eckig / http
@ eckig / gemeinsam / http
Hinweis: Sie müssen die zurückgegebenen Daten nicht mehr explizit extrahieren. Wenn es sich bei den zurückgegebenen Daten standardmäßig um JSON handelt, müssen Sie keine zusätzlichen Maßnahmen ergreifen.
Wenn Sie jedoch eine andere Art von Antwort wie Text oder Blob analysieren müssen, stellen Sie sicher, dass Sie die Antwort hinzufügen
responseType
. Wie so:Erstellen der GET HTTP-Anforderung mit der
responseType
Option:Interceptor hinzufügen
Ich habe auch Interceptors verwendet, um das Token für meine Autorisierung zu jeder Anfrage hinzuzufügen:
Dies ist eine gute Referenz: https://offering.solutions/blog/articles/2017/07/19/angular-2-new-http-interface-with-interceptors/
wie so:
Es ist ein ziemlich schönes Upgrade!
quelle
Es gibt eine Bibliothek, mit der Sie HttpClient mit stark typisierten Rückrufen verwenden können .
Die Daten und der Fehler sind direkt über diese Rückrufe verfügbar.
Wenn Sie HttpClient mit Observable verwenden, müssen Sie im Rest Ihres Codes .subscribe (x => ...) verwenden.
Dies liegt daran , Observable <
HttpResponse
<T
>> zu gebunden ist Httpresponse .Dadurch wird die http-Ebene eng mit dem Rest Ihres Codes gekoppelt .
Diese Bibliothek kapselt den Teil .subscribe (x => ...) und macht nur die Daten und Fehler durch Ihre Modelle verfügbar .
Bei stark typisierten Rückrufen müssen Sie sich nur im Rest Ihres Codes mit Ihren Modellen befassen.
Die Bibliothek heißt Angular-Extended-http-Client .
Angular-Extended-http-Client-Bibliothek auf GitHub
Angular-Extended-http-Client-Bibliothek auf NPM
Sehr einfach zu bedienen.
Beispielnutzung
Die stark typisierten Rückrufe sind
Erfolg:
T
>T
>Fehler:
TError
>TError
>Fügen Sie Ihrem Projekt und Ihrem App-Modul ein Paket hinzu
und in den @ NgModule-Importen
Ihre Modelle
Dein Dienst
In Ihrem Dienst erstellen Sie nur Parameter mit diesen Rückruftypen.
Übergeben Sie sie dann an die get-Methode von HttpClientExt .
Ihre Komponente
In Ihrer Komponente wird Ihr Service injiziert und die getRaceInfo- API wie unten gezeigt aufgerufen.
Sowohl Antwort und Fehler in den Rückrufen zurückgegeben werden stark typisieren. Z.B. Die Antwort ist vom Typ RacingResponse und der Fehler ist APIException .
Sie beschäftigen sich nur mit Ihren Modellen in diesen stark typisierten Rückrufen.
Daher kennt der Rest Ihres Codes nur Ihre Modelle.
Sie können auch weiterhin die herkömmliche Route verwenden und Observable <
HttpResponse<
T>
> von der Service-API zurückgeben.quelle
HttpClient ist eine neue API, die mit 4.3 geliefert wurde. Sie hat aktualisierte APIs mit Unterstützung für Fortschrittsereignisse, standardmäßige JSON-Deserialisierung, Interceptors und vielen anderen großartigen Funktionen. Weitere Informationen finden Sie hier https://angular.io/guide/http
Http ist die ältere API und wird irgendwann veraltet sein.
Da ihre Verwendung für grundlegende Aufgaben sehr ähnlich ist, würde ich die Verwendung von HttpClient empfehlen, da es die modernere und benutzerfreundlichere Alternative ist.
quelle