Différence entre HTTP et HTTPClient dans angular 4?

Question

Je veux savoir lequel utiliser pour créer un service Web fictif afin de tester le programme Angular?

Answer 1

Utilisez la classe HttpClient de HttpClientModule si vous utilisez Angular 4.3.x et versions supérieures:

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

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

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

C'est une version mise à niveau de http à partir du module @angular/http avec les améliorations suivantes:

• Les intercepteurs permettent d'insérer une logique middleware dans le pipeline
• Objets de demande/réponse immuables
• Événements de progression pour le téléchargement de demande et le téléchargement de réponse

Vous pouvez en savoir plus sur son fonctionnement dans Le guide d’initiés concernant les intercepteurs et la mécanique HttpClient dans Angular .

• Accès typé et synchrone au corps de réponse, avec prise en charge des types de corps JSON
• JSON est une valeur par défaut supposée et ne doit plus être explicitement analysé.
• Vérification après demande et cadre de test basé sur le vidage

À l'avenir, l'ancien client http sera obsolète. Voici les liens vers les messages commit et les documents officiels .

Faites également attention au fait que l'ancien http a été injecté à l'aide du jeton de classe Http au lieu du nouveau HttpClient:

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

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

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

De plus, new HttpClient semble nécessiter tslib au moment de l'exécution, vous devez donc l'installer npm i tslib et mettre à jour system.config.js si vous utilisez SystemJS:

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

Et vous devez ajouter un autre mappage si vous utilisez SystemJS:

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

Answer 2

Ne voulez pas être répétitif, mais simplement résumer autrement:

• Conversion automatique de JSON en objet
• Définition du type de réponse
• Tir d'événement
• Syntaxe simplifiée pour les en-têtes
• Les intercepteurs

J'ai écrit un article dans lequel je couvrais la différence entre l'ancien "http" et le nouveau "HttpClient". Le but était de l'expliquer de la manière la plus simple possible.

Simplement à propos du nouveau HttpClient in Angular

Answer 3

C’est une bonne référence, elle m’a aidé à passer mes requêtes http à httpClient

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

Il compare les deux en termes de différences et donne des exemples de code.

Ce ne sont là que quelques différences que j'ai gérées lors du changement de services en httpclient dans mon projet (emprunt de l'article que j'ai mentionné):

Importer

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

Demander et analyser une réponse:

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

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

Remarque: Il n'est plus nécessaire d'extraire explicitement les données renvoyées. Par défaut, si les données que vous récupérez sont de type JSON, vous ne devez rien faire de plus. 

Toutefois, si vous devez analyser un autre type de réponse, tel que text ou blob, veillez à ajouter la variable responseType à la requête. Ainsi:

Création de la requête HTTP GET avec l'option responseType:

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

Ajout d'un intercepteur

J'ai également utilisé des intercepteurs pour ajouter le jeton d'autorisation à chaque requête:

C’est une bonne référence: https://offering.solutions/blog/articles/2017/07/19/angular-2-new-http-interface-with-interceptors/

ainsi:

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

C'est une jolie mise à jour Nice!

Answer 4

Il existe une bibliothèque qui vous permet d'utiliser HttpClient avec des rappels fortement typés.

Les données et l'erreur sont disponibles directement via ces callbacks.

 

Lorsque vous utilisez HttpClient avec Observable, vous devez utiliser .subscribe (x => ...) dans le reste de votre code.

En effet, Observable <HttpResponse <T >> est liée à HttpResponse.

Ce couple étroitement la couche http avec le reste de votre code.

Cette bibliothèque encapsule la partie .subscribe (x => ...) et expose uniquement les données et les erreurs via vos modèles.

Avec les callbacks fortement typés, il vous suffit de traiter vos modèles dans le reste de votre code.

La bibliothèque s'appelle angular-extended-http-client.

bibliothèque-client-angular-extended-http sur GitHub

bibliothèque angulaire-étendue-client-http sur NPM

Très facile à utiliser.

Utilisation de l'échantillon

Les rappels fortement typés sont 

Succès:

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

Échec:

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

Ajouter un package à votre projet et à votre module d'application

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

et dans les importations @NgModule

  imports: [
    .
    .
    .
    HttpClientExtModule
  ],

Vos modèles

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

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

Ton service

Dans votre service, vous créez simplement des paramètres avec ces types de rappel.

Ensuite, transmettez-les à la méthode get de 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);
    }
}

Votre composant

Dans votre composant, votre service est injecté et l'API getRaceInfo est appelée comme indiqué ci-dessous.

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

  }

Response et error renvoyés dans les rappels sont fortement typés. Par exemple. réponse est de type RacingResponse et error est de type APIException.

Vous ne traitez que vos modèles dans ces rappels fortement typés.

Par conséquent, le reste de votre code ne connaît que vos modèles.

En outre, vous pouvez toujours utiliser l'itinéraire traditionnel et renvoyer Observable <HttpResponse<T>> à partir de l'API Service.

Answer 5

HttpClient est une nouvelle API fournie avec la version 4.3. Elle a mis à jour des API prenant en charge les événements de progression, la désérialisation JSON par défaut, les intercepteurs et de nombreuses autres fonctionnalités intéressantes. Voir plus icihttps://angular.io/guide/http

Http est l'ancienne API et sera éventuellement obsolète.

Étant donné que leur utilisation est très similaire pour les tâches de base, je vous conseillerais d'utiliser HttpClient car c'est l'alternative plus moderne et facile à utiliser.