Différence entre HttpModule et HttpClientModule

Lequel utiliser pour créer un faux service Web pour tester l'application Angular 4?

Utilisez la HttpClientclasse de HttpClientModulesi vous utilisez Angular 4.3.x et supérieur:

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

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

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

Il s'agit d'une version mise à niveau httpdu @angular/httpmodule avec les améliorations suivantes:

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

Vous pouvez lire comment cela fonctionne dans le guide d'Insider sur les intercepteurs et la mécanique HttpClient dans Angular .

• Accès au corps de réponse synchrone typé, y compris la prise en charge des types de corps JSON
• JSON est une valeur par défaut supposée et n'a plus besoin d'être explicitement analysée
• Vérification post-demande et cadre de test basé sur le rinçage

À l'avenir, l'ancien client http sera obsolète. Voici les liens vers le message de validation et les documents officiels .

Faites également attention à ce que l'ancien http ait été injecté à l'aide du Httpjeton de classe au lieu du nouveau HttpClient:

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

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

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

De plus, les nouvelles HttpClientsemblent nécessiter tsliben runtime, vous devez donc l'installer npm i tslibet mettre à jour system.config.jssi 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',

Je ne veux pas être répétitif, mais simplement pour résumer d'une autre manière (fonctionnalités ajoutées dans le nouveau HttpClient):

• 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
• Intercepteurs

J'ai écrit un article, où j'ai couvert 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.

Tout simplement sur le nouveau HttpClient en angulaire

Ceci est une bonne référence, cela m'a aidé à basculer mes demandes http vers 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 que quelques différences que j'ai traitées en changeant les services en httpclient dans mon projet (emprunt à l'article que j'ai mentionné):

Importation

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

Demande et analyse de la réponse:

@ angulaire / 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: vous n'avez plus à extraire explicitement les données renvoyées; par défaut, si les données que vous récupérez sont de type JSON, vous n'avez rien d'autre à faire.

Mais, si vous devez analyser tout autre type de réponse comme du texte ou un blob, assurez-vous d'ajouter le responseTypedans la demande. Ainsi:

Faire la requête HTTP GET avec 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);
      });

Ajout d'intercepteur

J'ai également utilisé des intercepteurs pour ajouter le jeton de mon autorisation à chaque demande:

Ceci 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 très belle mise à niveau!

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 rappels.

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 .

Cela 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 des rappels fortement typés, vous n'avez à gérer vos modèles que dans le reste de votre code.

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

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

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

Très simple d'utilisation.

Exemple d'utilisation

Les rappels fortement typés sont

Succès:

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

Échec:

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

Ajoutez un package à votre projet et dans 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 appelée comme indiqué ci-dessous.

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

  }

La réponse et l' erreur renvoyées dans les rappels sont fortement typées. Par exemple. la réponse est de type RacingResponse et l' erreur est APIException .

Vous ne traitez vos modèles que 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 la route traditionnelle et renvoyer Observable < HttpResponse<T >> à partir de l'API de service.

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

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

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