Którego użyć, aby zbudować próbną usługę internetową do testowania aplikacji Angular 4?
angular
angular-httpclient
angular2-http
Aiyoub Amini
źródło
źródło
Odpowiedzi:
Użyj
HttpClient
klasy od,HttpClientModule
jeśli używasz Angulara 4.3.xi nowszych:Jest to ulepszona wersja
http
z@angular/http
modułem z następujących zmian:O tym, jak to działa, możesz przeczytać w przewodniku Insider dotyczącym przechwytywaczy i mechaniki HttpClient w Angular .
W przyszłości stary klient http będzie przestarzały. Oto linki do wiadomości zatwierdzenia i oficjalnych dokumentów .
Zwróć też uwagę, że stary http został wstrzyknięty przy użyciu
Http
tokena klasy zamiast nowegoHttpClient
:HttpClient
Wydaje się również, że nowe wymagajątslib
działania w czasie wykonywania, więc musisz je zainstalowaćnpm i tslib
i zaktualizować,system.config.js
jeśli używaszSystemJS
:I musisz dodać kolejne mapowanie, jeśli używasz SystemJS:
źródło
node_modules
folder i uruchomnpm install
ponownie'@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
Nie chcę być powtarzalny, ale po prostu podsumować w inny sposób (funkcje dodane w nowym HttpClient):
Napisałem artykuł, w którym opisałem różnicę między starym „http” a nowym „HttpClient”. Celem było wyjaśnienie tego w możliwie najprostszy sposób.
Po prostu o nowym HttpClient w Angular
źródło
To dobre odniesienie, pomogło mi zmienić moje żądania HTTP na httpClient
https://blog.hackages.io/angular-http-httpclient-same-but-different-86a50bbcc450
Porównuje je pod względem różnic i podaje przykłady kodu.
To tylko kilka różnic, z którymi miałem do czynienia, zmieniając usługi na httpclient w moim projekcie (pożyczanie z artykułu, o którym wspomniałem):
Importowanie
Żądanie i analiza odpowiedzi:
@ angular / http
@ kątowy / wspólny / http
Uwaga: Nie musisz już jawnie wyodrębniać zwróconych danych; domyślnie, jeśli dane, które odzyskujesz, są typu JSON, nie musisz robić nic więcej.
Ale jeśli musisz przeanalizować dowolny inny typ odpowiedzi, taki jak tekst lub obiekt blob, upewnij się, że dodajesz
responseType
w żądaniu. Tak jak:Wykonanie żądania GET HTTP z
responseType
opcją:Dodawanie przechwytywacza
Użyłem także przechwytywaczy do dodania tokena mojej autoryzacji do każdego żądania:
To jest dobre odniesienie: https://offering.solutions/blog/articles/2017/07/19/angular-2-new-http-interface-with-interceptors/
tak:
To całkiem niezła aktualizacja!
źródło
Istnieje biblioteka, która pozwala używać HttpClient z silnie wywoływanymi wywołaniami zwrotnymi .
Dane i błąd są dostępne bezpośrednio za pośrednictwem tych wywołań zwrotnych.
Kiedy używasz HttpClient z Observable, musisz użyć .subscribe (x => ...) w pozostałej części kodu.
Wynika to z faktu, że Observable
HttpResponse
<<T
>> jest powiązany z HttpResponse .To szczelnie pary warstwa http z resztą kodu .
Ta biblioteka zawiera część .subscribe (x => ...) i ujawnia tylko dane i błędy za pośrednictwem modeli.
Przy silnie wpisywanych wywołaniach zwrotnych masz do czynienia z modelami tylko w pozostałej części kodu.
Biblioteka nosi nazwę angular-Extended-http-client .
biblioteka klienta kątowa-rozszerzona-http na GitHub
biblioteka klienta angular-Extended-http-Client na NPM
Bardzo łatwy w użyciu.
Przykładowe użycie
Silnie typowane wywołania zwrotne to
Sukces:
T
>T
>Niepowodzenie:
TError
>TError
>Dodaj pakiet do swojego projektu i do modułu aplikacji
oraz w imporcie @NgModule
Twoje modele
Twoja usługa
W swojej usłudze po prostu tworzysz parametry za pomocą tych typów połączeń zwrotnych.
Następnie przekaż je do metody get HttpClientExt .
Twój komponent
W Twoim Komponencie twoja Usługa jest wstrzykiwana, a API getRaceInfo wywoływane, jak pokazano poniżej.
Zarówno odpowiedź, jak i błąd zwracane w wywołaniach zwrotnych są mocno wpisane. Na przykład. odpowiedź jest typu RacingResponse, a błąd to wyjątek APIE .
Z modelami masz do czynienia tylko w tych typowych wywołaniach zwrotnych.
Dlatego reszta kodu wie tylko o twoich modelach.
Ponadto możesz nadal korzystać z tradycyjnej trasy i zwracać wartość Observable <
HttpResponse<
T>
> z Service API.źródło
HttpClient to nowy interfejs API, który został dostarczony z wersją 4.3, zaktualizował interfejsy API z obsługą zdarzeń postępu, domyślnie deserializacji json, przechwytywaczy i wielu innych wspaniałych funkcji. Zobacz więcej tutaj https://angular.io/guide/http
HTTP jest starszym API i ostatecznie będzie przestarzałe.
Ponieważ ich użycie jest bardzo podobne do podstawowych zadań, radziłbym używać HttpClient, ponieważ jest to bardziej nowoczesna i łatwa w użyciu alternatywa.
źródło