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

Utiliser l' HttpClient classe HttpClientModule si vous utilisez Angulaire 4.3.x et au-dessus:

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

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

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

C'est une version améliorée de l' http de @angular/http module avec les améliorations suivantes:

• Les intercepteurs de permettre middleware logique pour être inséré dans le pipeline
• Immuable de requête/réponse objets
• Événements de progression pour les deux demande de télécharger et d'intervention télécharger

Vous pouvez lire au sujet de la façon dont il fonctionne dans le guide de l'Initié dans des intercepteurs et HttpClient mécanique Angulaire.

• Tapé, synchrone, le corps de la réponse de l'accès, y compris le support de JSON types de corps
• JSON est une hypothèse d'un défaut et n'a plus besoin d'être explicitement analysé
• L'après-demande de vérification et de chasse basé sur un framework de test

À l'avenir, la vieille http client sera obsolète. Voici les liens pour le message de commit et les docs officielles.

Faites également attention que les vieux http a été injecté à l'aide d' Http classe jeton à la place de la nouvelle - HttpClient:

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

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

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

Aussi, de nouveaux HttpClient semblent exiger tslib lors de l'exécution, de sorte que vous devez installer npm i tslib et mise à jour de system.config.js si vous utilisez SystemJS:

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

Et vous avez besoin d'ajouter une autre cartographie si vous utilisez SystemJS:

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

Answer 2

Ne veux pas être répétitif, mais juste pour résumer d'une autre manière:

• Conversion automatique de JSON à un objet
• Réponse de la définition de type
• Événement de tir
• Syntaxe simplifiée pour les en-têtes
• Les intercepteurs

J'ai écrit un article, où j'ai couvert la différence entre les anciens "http" et les nouveaux "HttpClient". L'objectif était d'expliquer de la manière la plus simple possible.

Simplement sur les nouveaux HttpClient Angulaire

Answer 3

C'est une bonne référence, il m'a aidé à passer mon 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.

C'est juste quelques différences que j'ai traitées, tandis que l'évolution des services à httpclient dans mon projet (emprunt de l'article que j'ai mentionné) :

L'importation de

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

Requérant et l'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/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);
      });

Remarque: Vous n'avez plus à extraire les données retournées de façon explicite; par défaut, si les données que vous obtenez en retour est de type JSON, alors vous n'avez pas à faire grand chose de plus.

Mais, si vous avez besoin d'analyser n'importe quel autre type de réponse, comme text ou blob, alors assurez-vous d'ajouter l' responseType de la demande. Comme suit:

Faire la requête HTTP GET avec responseType option:

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

L'Ajout De L'Intercepteur

J'ai aussi utilisé des intercepteurs pour l'ajout du jeton pour mon autorisation pour toute demande:

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

comme suit:

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

Ses une jolie mise à niveau!

Answer 4

Il y a une bibliothèque qui vous permet d' utiliser HttpClient avec fortement typées rappels.

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

Lorsque vous utilisez HttpClient avec Observables, vous devez utiliser .s'abonner(x=>...) dans le reste de votre code.

C'est parce que Observables<HttpResponse<T>> est liée à HttpResponse.

Cette étroitement les couples de la couche http avec le reste de votre code.

Cette bibliothèque renferme l' .s'abonner(x => ...) la partie et n'expose que les données et les erreurs grâce à vos Modèles.

Avec fortement typées rappels, vous n'avez qu'à composer avec vos Modèles dans le reste de votre code.

La bibliothèque est appelée angulaires-extended-http-client.

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

angulaire-extended-http-bibliothèque client sur NGP

Très facile à utiliser.

Exemple d'utilisation

Fortement typées rappels sont

Succès:

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

Échec:

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

Ajouter le package de votre projet et dans votre application module

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

et dans le @NgModule importations

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

Votre Service

Dans votre Service, il vous suffit de créer params avec ces types de rappel.

Ensuite, passez-les à la HttpClientExt's la méthode get.

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 de la getRaceInfo API appelée comme indiqué ci-dessous.

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

  }

À la fois, de réponse et d'erreur renvoyé dans les rappels sont fortement typés. Par exemple. la réponse est de type RacingResponse et l' erreur est APIException.

Vous ne vous occupez avec vos Modèles dans ces fortement typées rappels.

Par conséquent, Le reste de votre code qui ne sait à propos de vos Modèles.

Aussi, vous pouvez toujours utiliser la voie traditionnelle et retour Observables<HttpResponse<T>> à partir de l'API de Service.

Answer 5

HttpClient est une nouvelle API qui est venu avec la 4.3, il a mis à jour de l'API avec l'appui du progrès des événements, json désérialisation par défaut, Intercepteurs et de nombreuses autres fonctionnalités. Voir plus ici https://angular.io/guide/http

Http est le plus vieux de l'API et finira par être obsolète.

Depuis leur utilisation est très similaire pour les tâches de base, je vous conseille l'aide HttpClient, car il est le plus moderne et facile à utiliser d'autres.