Diferença entre HTTP e HTTPClient em angular 4?

Eu quero saber qual usar para construir um serviço da Web simulado para testar o programa Angular?

Use a class HttpClient do HttpClientModule se você estiver usando o Angular 4.3.xe acima:

 import { HttpClientModule } from '@angular/common/http'; @NgModule({ imports: [ BrowserModule, HttpClientModule ], ... class MyService() { constructor(http: HttpClient) {...} 

É uma versão atualizada do http do módulo @angular/http com as seguintes melhorias:

  • Interceptadores permitem que a lógica do middleware seja inserida no pipeline
  • Objetos de solicitação / resposta imutáveis
  • Eventos de progresso para upload de solicitação e download de resposta

Você pode ler sobre como ele funciona no guia do Insider em interceptores e na mecânica do HttpClient em Angular .

  • Acesso ao corpo de resposta digitada e síncrona, incluindo suporte para tipos de corpo JSON
  • JSON é um padrão assumido e não precisa mais ser explicitamente analisado
  • Verificação pós-solicitação e estrutura de testes baseada em flush

A partir de agora, o antigo cliente http será obsoleto. Aqui estão os links para a mensagem de commit e os documentos oficiais .

Também preste atenção que o http antigo foi injetado usando o token de class Http vez do novo HttpClient :

 import { HttpModule } from '@angular/http'; @NgModule({ imports: [ BrowserModule, HttpModule ], ... class MyService() { constructor(http: Http) {...} 

Além disso, o novo HttpClient parece exigir o tslib em tempo de execução, portanto, é necessário instalá-lo npm i tslib e atualizar o system.config.js se estiver usando o SystemJS :

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

E você precisa adicionar outro mapeamento se usar o SystemJS:

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

Não quero ser repetitivo, mas apenas para resumir de outra maneira:

  • Conversão automática de JSON para um object
  • Definição do tipo de resposta
  • Disparo do evento
  • Sintaxe simplificada para headers
  • Interceptores

Eu escrevi um artigo, onde eu cobri a diferença entre o antigo “http” e o novo “HttpClient”. O objective era explicá-lo da maneira mais fácil possível.

Simplesmente sobre o novo HttpClient em Angular

Esta é uma boa referência, ajudou-me a mudar os meus pedidos de http para httpClient

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

Ele compara os dois em termos de diferenças e fornece exemplos de código.

Esta é apenas algumas diferenças com as quais lidei enquanto mudava os serviços para o httpclient no meu projeto (emprestado do artigo que mencionei):

importando

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

solicitando e analisando resposta

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

httpclient:

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

Nota: você não precisa mais dos dados explicitamente, por padrão, se os dados que você recebe são JSON, você não precisa fazer nada extra, mas se você precisar analisar qualquer outro tipo de resposta como texto ou blob, adicione o responseType em o pedido. igual a:

// Faz a requisição HTTP GET com a opção 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); }); 

Também usei interceptores para adicionar o token da minha autorização a todas as solicitações:

esta é uma boa referência: https://offering.solutions/blog/articles/2017/07/19/angular-2-new-http-interface-with-interceptors/

igual a:

 @Injectable() export class MyFirstInterceptor implements HttpInterceptor { constructor(private currentUserService: CurrentUserService) { } intercept(req: HttpRequest, next: HttpHandler): Observable> { // 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); } } 

É um upgrade bem legal!