Różnica między HttpModule i HttpClientModule

Którego użyć, aby zbudować próbną usługę internetową do testowania aplikacji Angular 4?

Użyj HttpClientklasy od, HttpClientModulejeśli używasz Angulara 4.3.xi nowszych:

import { HttpClientModule } from '@angular/common/http';

@NgModule({
 imports: [
   BrowserModule,
   HttpClientModule
 ],
 ...

 class MyService() {
    constructor(http: HttpClient) {...}

Jest to ulepszona wersja httpz @angular/httpmodułem z następujących zmian:

• Przechwytywacze umożliwiają wstawienie logiki oprogramowania pośredniego do potoku
• Niezmienne obiekty zapytania / odpowiedzi
• Wydarzenia postępów zarówno w przypadku przesyłania żądania, jak i pobierania odpowiedzi

O tym, jak to działa, możesz przeczytać w przewodniku Insider dotyczącym przechwytywaczy i mechaniki HttpClient w Angular .

• Wpisany, synchroniczny dostęp do treści odpowiedzi, w tym obsługa typów treści JSON
• JSON jest domyślnym założeniem i nie musi być jawnie analizowany
• Weryfikacja po zgłoszeniu i platforma do testowania w oparciu o kolor

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 Httptokena klasy zamiast nowego HttpClient:

import { HttpModule } from '@angular/http';

@NgModule({
 imports: [
   BrowserModule,
   HttpModule
 ],
 ...

 class MyService() {
    constructor(http: Http) {...}

HttpClientWydaje się również, że nowe wymagają tslibdziałania w czasie wykonywania, więc musisz je zainstalować npm i tslibi zaktualizować, system.config.jsjeśli używasz SystemJS:

map: {
     ...
    'tslib': 'npm:tslib/tslib.js',

I musisz dodać kolejne mapowanie, jeśli używasz SystemJS:

'@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):

• Automatyczna konwersja z JSON na obiekt
• Definicja typu odpowiedzi
• Odpalanie zdarzeń
• Uproszczona składnia nagłówków
• Przechwytywacze

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

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

import {HttpModule} from '@angular/http';
import {HttpClientModule} from '@angular/common/http';

Żądanie i analiza odpowiedzi:

@ angular / http

 this.http.get(url)
      // Extract the data in HTTP Response (parsing)
      .map((response: Response) => response.json() as GithubUser)
      .subscribe((data: GithubUser) => {
        // Display the result
        console.log('TJ user data', data);
      });

@ kątowy / wspólny / http

 this.http.get(url)
      .subscribe((data: GithubUser) => {
        // Data extraction from the HTTP response is already done
        // Display the result
        console.log('TJ user data', data);
      });

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 responseTypew żądaniu. Tak jak:

Wykonanie żądania GET HTTP z responseTypeopcją:

 this.http.get(url, {responseType: 'blob'})
      .subscribe((data) => {
        // Data extraction from the HTTP response is already done
        // Display the result
        console.log('TJ user data', data);
      });

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:

@Injectable()
export class MyFirstInterceptor implements HttpInterceptor {

    constructor(private currentUserService: CurrentUserService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        // get the token from a service
        const token: string = this.currentUserService.token;

        // add it if we have one
        if (token) {
            req = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + token) });
        }

        // if this is a login-request the header is 
        // already set to x/www/formurl/encoded. 
        // so if we already have a content-type, do not 
        // set it, but if we don't have one, set it to 
        // default --> json
        if (!req.headers.has('Content-Type')) {
            req = req.clone({ headers: req.headers.set('Content-Type', 'application/json') });
        }

        // setting the accept header
        req = req.clone({ headers: req.headers.set('Accept', 'application/json') });
        return next.handle(req);
    }
}

To całkiem niezła aktualizacja!

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:

• IObservable < T>
• IObservableHttpResponse
• IObservableHttpCustomResponse < T>

Niepowodzenie:

• IObservableError < TError>
• IObservableHttpError
• IObservableHttpCustomError < TError>

Dodaj pakiet do swojego projektu i do modułu aplikacji

import { HttpClientExtModule } from 'angular-extended-http-client';

oraz w imporcie @NgModule

  imports: [
    .
    .
    .
    HttpClientExtModule
  ],

Twoje modele

//Normal response returned by the API.
export class RacingResponse {
    result: RacingItem[];
}

//Custom exception thrown by the API.
export class APIException {
    className: string;
}

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 .

import { Injectable, Inject } from '@angular/core'
import { RacingResponse, APIException } from '../models/models'
import { HttpClientExt, IObservable, IObservableError, ResponseType, ErrorType } from 'angular-extended-http-client';
.
.

@Injectable()
export class RacingService {

    //Inject HttpClientExt component.
    constructor(private client: HttpClientExt, @Inject(APP_CONFIG) private config: AppConfig) {

    }

    //Declare params of type IObservable<T> and IObservableError<TError>.
    //These are the success and failure callbacks.
    //The success callback will return the response objects returned by the underlying HttpClient call.
    //The failure callback will return the error objects returned by the underlying HttpClient call.
    getRaceInfo(success: IObservable<RacingResponse>, failure?: IObservableError<APIException>) {
        let url = this.config.apiEndpoint;

        this.client.get(url, ResponseType.IObservable, success, ErrorType.IObservableError, failure);
    }
}

Twój komponent

W Twoim Komponencie twoja Usługa jest wstrzykiwana, a API getRaceInfo wywoływane, jak pokazano poniżej.

  ngOnInit() {    
    this.service.getRaceInfo(response => this.result = response.result,
                                error => this.errorMsg = error.className);

  }

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.

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.