it-swarm.com.de

Unterschied zwischen HTTP und HTTPClient in Winkel 4?

Ich möchte wissen, mit wem Sie einen Mock-Webdienst zum Testen des Angular-Programms erstellen möchten?

204
Aiyoub Amini

Verwenden Sie die HttpClient-Klasse aus HttpClientModule, wenn 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 aktualisierte Version von http vom @angular/http-Modul mit den folgenden Verbesserungen:

  • Interceptors ermöglichen das Einfügen von Middleware-Logik in die Pipeline
  • Unveränderliche Anforderungs-/Antwortobjekte
  • Statusereignisse für das Hochladen von Anforderungen und das Herunterladen von Antworten

Wie das funktioniert, erfahren Sie in Insiders Leitfaden zu Interceptors und HttpClient-Mechanik in Angular .

  • Typisierter, synchroner Body-Zugriff für Antworten, einschließlich Unterstützung für JSON-Body-Typen
  • JSON ist ein angenommener Standardwert und muss nicht mehr explizit analysiert werden
  • Überprüfung der Anforderungen nach Anforderung und Flush-basiertes Test-Framework

In der Zukunft wird der alte http-Client nicht mehr verwendet. Hier sind die Links zur commit-Nachricht und den offiziellen Dokumenten .

Achten Sie auch darauf, dass das alte http mit Http-Klassentoken anstelle der neuen HttpClient eingefügt wurde:

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

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

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

Für neue HttpClient scheint tslib zur Laufzeit erforderlich zu sein. Sie müssen npm i tslib installieren und system.config.js aktualisieren, wenn Sie SystemJS verwenden:

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

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

'@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',

Ich will mich nicht wiederholen, sondern nur auf andere Weise zusammenfassen:

  • Automatische Konvertierung von JSON in ein Objekt
  • Definition des Antworttyps
  • Ereignis wird ausgelöst
  • Vereinfachte Syntax für Header
  • Abfangjäger

Ich schrieb einen Artikel, in dem ich den Unterschied zwischen dem alten "http" und dem neuen "HttpClient" behandelte. Ziel war es, es auf möglichst einfache Weise zu erklären.

Einfach nur ein neuer HttpClient in Angular

39
skryvets

Dies ist eine gute Referenz, es hat mir geholfen, meine http-Anfragen auf httpClient umzustellen

https://blog.hackages.io/angular-http-httpclient-same-but-different-86a50bbcc450

Es vergleicht die beiden in Bezug auf Unterschiede und gibt Codebeispiele.

Dies sind nur einige Unterschiede, mit denen ich mich befasst habe, als ich in meinem Projekt Services auf httpclient umstellte (Anleihen 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/common/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 die zurückgegebenen Daten standardmäßig JSON sind, müssen Sie nichts weiter tun. 

Wenn Sie jedoch eine andere Antwortart wie Text oder Blob analysieren müssen, fügen Sie der Anfrage die Variable responseType hinzu. So wie:

GET HTTP-Anfrage mit der Option responseType durchführen:

 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 Interzeptoren verwendet, um jeder Anforderung das Token für meine Autorisierung 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!

15
abann sunny

Es gibt eine Bibliothek, in der Sie verwenden Sie HttpClient mit stark typisierten Rückrufen.

Die Daten und der Fehler sind direkt über diese Rückrufe verfügbar.

 A reason for existing

Wenn Sie HttpClient mit Observable verwenden, müssen Sie im restlichen Code .subscribe (x => ...) verwenden.

Dies liegt daran, dass beobachtbare <HttpResponse <T >> an HttpResponse gebunden ist.

Dieses fest gekoppelt das http-Layer mit dem Rest des Codes.

Diese Bibliothek kapselt den Teil .subscribe (x => ...) und macht nur die Daten und Fehler in Ihren Modellen sichtbar.

Bei stark typisierten Rückrufen müssen Sie sich nur mit Ihren Modellen im Rest Ihres Codes befassen.

Die Bibliothek heißt angle-extended-http-client.

eckig-erweiterte-http-client-Bibliothek auf GitHub

Winkel-Extended-http-Client-Bibliothek in NPM

Sehr einfach zu bedienen.

Verwendungsbeispiel

Die stark typisierten Rückrufe sind 

Erfolg:

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

Fehler:

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

Fügen Sie Ihrem Projekt und in 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 Service erstellen Sie lediglich Params mit diesen Callback-Typen.

Ü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 API getRaceInfo wird aufgerufen (siehe unten).

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

  }

Sowohl Antwort als auch Fehler, die in den Callbacks zurückgegeben werden, sind stark typisiert. Z.B. Antwort ist der Typ RacingResponse und Fehler ist APIException.

Sie behandeln Ihre Modelle nur 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.

0
Shane

HttpClient ist eine neue API, die mit 4.3 geliefert wurde. Sie enthält aktualisierte APIs mit Unterstützung für Fortschrittsereignisse, standardmäßige JSON-Deserialisierung, Interceptors und viele andere großartige Funktionen. Sehen Sie mehr hierhttps://angular.io/guide/http

Http ist die ältere API und wird möglicherweise nicht mehr unterstützt.

Da ihre Verwendung für grundlegende Aufgaben sehr ähnlich ist, würde ich die Verwendung von HttpClient empfehlen, da dies die modernere und benutzerfreundlichere Alternative ist.

0
Chirag