Unterschied zwischen HttpModule und HttpClientModule

Mit welchem ​​können Sie einen nachgebildeten Webdienst erstellen, um die Angular 4-App zu testen?

Verwenden Sie die HttpClientKlasse von, HttpClientModulewenn Sie Angular 4.3.x und höher verwenden:

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

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

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

Es ist eine verbesserte Version der httpvom @angular/httpModul mit den folgenden Verbesserungen:

• Mit Interceptors kann die Middleware-Logik in die Pipeline eingefügt werden
• Unveränderliche Anforderungs- / Antwortobjekte
• Fortschrittsereignisse sowohl für das Hochladen von Anforderungen als auch für das Herunterladen von Antworten

Wie es funktioniert, finden Sie im Insider-Handbuch zu Interceptors und HttpClient-Mechanik in Angular .

• Typisierter synchroner Antwortkörperzugriff, einschließlich Unterstützung für JSON-Körpertypen
• JSON ist eine angenommene Standardeinstellung und muss nicht mehr explizit analysiert werden
• Überprüfungs- und Flush-basiertes Testframework nach Anforderung

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 HttpKlassentokens anstelle des neuen injiziert wurde HttpClient:

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

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

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

Außerdem HttpClientscheint es zur tslibLaufzeit neu zu sein, sodass Sie es installieren npm i tslibund aktualisieren müssen, system.config.jswenn Sie Folgendes verwenden SystemJS:

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

Und Sie müssen ein weiteres Mapping hinzufügen, wenn Sie SystemJS verwenden:

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

• Automatische Konvertierung von JSON in ein Objekt
• Definition des Antworttyps
• Ereignisauslösung
• Vereinfachte Syntax für Header
• Abfangjäger

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

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

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

Antwort anfordern und analysieren:

@ eckig / 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);
      });

@ eckig / gemeinsam / 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);
      });

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 responseTypeOption:

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

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:

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

Es ist ein ziemlich schönes Upgrade!

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:

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

Fehler:

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

Fügen Sie Ihrem Projekt und Ihrem App-Modul ein Paket hinzu

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

und in den @ NgModule-Importen

  imports: [
    .
    .
    .
    HttpClientExtModule
  ],

Ihre Modelle

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

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

Dein Dienst

In Ihrem Dienst erstellen Sie nur Parameter mit diesen Rückruftypen.

Übergeben Sie sie dann an die get-Methode von 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);
    }
}

Ihre Komponente

In Ihrer Komponente wird Ihr Service injiziert und die getRaceInfo- API wie unten gezeigt aufgerufen.

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

  }

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.

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.