Différence entre HTTP et HTTPClient angulaire 4?

Utiliser le HttpClient classe de 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 http de @angular/http module avec les améliorations suivantes:

• Intercepteurs 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 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é
• Après une demande de vérification & flush structure de test basée sur

L'avenir de l'ancien client http sera obsolète. Voici les liens pour le message de commit et les docs officielles.

Aussi faire attention que le 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 dans l'exécution, de sorte que vous devez installer npm i tslib et mise à jour 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',

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é) :

Importation

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 le responseType dans la demande. Comme:

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!

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 la plus ancienne de l'API et finira par être obsolète.

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