Différence entre HttpModule et HttpClientModule


229

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



1
Hier, j'ai écrit sur certaines de ses nouvelles fonctionnalités sur mon blog: blog.jonrshar.pe/2017/Jul/15/angular-http-client.html
jonrsharpe


6
Le didacticiel utilise HttpModule et angular.io/guide/http utilise HttpClientModule et ni l'un ni l'autre n'expliquent quand l'un ou l'autre doit être utilisé ou quelle version d'Angular est nécessaire pour utiliser quoi.
Mickey Segal

Consultez cet exemple Angular 8 HttpClient pour consommer l'API RESTFul freakyjolly.com/…
Code Spy

Réponses:


338

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',

1
J'essaie d'importer HttpClientModule. Mais '@ angular / common / http' n'est pas présent dans le répertoire node_modules que j'ai installé à l'aide de la commande "npm start". Pouvez-vous m'aider?
Dheeraj Kumar

1
@DheerajKumar, quelle version utilisez-vous? il n'est disponible qu'en 4.3.0 et plus
Max Koretskyi

J'ai téléchargé angular quick start depuis git. et dans package.json, "@ angular / common": "^ 4.3.0" est présent. mais il n'y a pas @ angular / common / http.
Dheeraj Kumar

retirer le node_modulesdossier et exécuter à npm installnouveau
Max Koretskyi

5
J'ai rencontré ce même problème (j'utilise System.js). Une chose qui manque à cette réponse est que vous devrez également mapper le nouveau module dans system.js comme suit: '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
Tyler O

43

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


18

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!


Vous devez inclure les informations pertinentes dans votre réponse et pas seulement sous forme de lien
Michael

1

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.

Une raison d'exister

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.


0

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.