example - httpclient angular 6

Diferencia entre HttpModule y HttpClientModule

Question

¿Cuál usar para crear un servicio web simulado para probar la aplicación Angular 4?

Answer 1

Esta es una buena referencia, me ayudó a cambiar mis solicitudes http a httpClient

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

Compara los dos en términos de diferencias y da ejemplos de código.

Estas son solo algunas diferencias con las que traté mientras cambiaba los servicios a httpclient en mi proyecto (tomando prestado del artículo que mencioné):

Importador

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

Solicitar y analizar la respuesta:

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

@ angular / común / 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);
      });

Nota: Ya no tiene que extraer los datos devueltos explícitamente; de forma predeterminada, si los datos que obtiene son del tipo JSON, entonces no tiene que hacer nada adicional.

Pero, si necesita analizar cualquier otro tipo de respuesta como texto o blob, asegúrese de agregar el tipo de responseType en la solicitud. Al igual que:

Realización de la solicitud GET HTTP con la opción 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);
      });

Agregar interceptor

También utilicé interceptores para agregar el token para mi autorización a cada solicitud:

Esta es una buena referencia: https://offering.solutions/blog/articles/2017/07/19/angular-2-new-http-interface-with-interceptors/

al igual que:

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

Es una muy buena actualización!

Answer 2

Hay una biblioteca que le permite usar HttpClient con devoluciones de llamada fuertemente tipadas .

Los datos y el error están disponibles directamente a través de estas devoluciones de llamada.

Cuando usa HttpClient con Observable, debe usar .subscribe (x => ...) en el resto de su código.

Esto se debe a que Observable < HttpResponse < T >> está vinculado a HttpResponse .

Esto combina estrechamente la capa http con el resto de su código .

Esta biblioteca encapsula la parte .subscribe (x => ...) y expone solo los datos y el error a través de sus Modelos.

Con devoluciones de llamada fuertemente tipadas, solo tiene que lidiar con sus Modelos en el resto de su código.

La biblioteca se llama angular-extended-http-client .

biblioteca angular-extended-http-client en GitHub

biblioteca angular-extended-http-client en NPM

Muy facil de usar.

Uso de la muestra

Las devoluciones de llamada fuertemente tipadas son

Éxito:

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

Fracaso:

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

Agregue paquete a su proyecto y en su módulo de aplicación

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

y en las importaciones @NgModule

  imports: [
    .
    .
    .
    HttpClientExtModule
  ],

Sus modelos

//Normal response returned by the API.
export class RacingResponse {
    result: RacingItem[];
}

//Custom exception thrown by the API.
export class APIException {
    className: string;
}

Tu servicio

En su Servicio, solo crea parámetros con estos tipos de devolución de llamada.

Luego, páselos al método 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);
    }
}

Su componente

En su Componente, se inyecta su Servicio y se llama a la API getRaceInfo como se muestra a continuación.

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

  }

Tanto la respuesta como el error devuelto en las devoluciones de llamada están fuertemente tipados. P.ej. la respuesta es tipo RacingResponse y el error es APIException .

Solo trata con sus modelos en estas devoluciones de llamada fuertemente tipadas.

Por lo tanto, el resto de su código solo conoce sus Modelos.

Además, aún puede usar la ruta tradicional y devolver Observable < HttpResponse< T>> desde Service API.

Answer 3

No quiero ser repetitivo, pero solo para resumir de otra manera:

• Conversión automática de JSON a un objeto
• Definición del tipo de respuesta
• Evento de disparo
• Sintaxis simplificada para encabezados
• Interceptores

Escribí un artículo, donde cubrí la diferencia entre el antiguo "http" y el nuevo "HttpClient". El objetivo era explicarlo de la manera más fácil posible.

Simplemente sobre el nuevo HttpClient en Angular

Answer 4

Use la clase HttpClient de HttpClientModule si está usando Angular 4.3.xy superior:

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

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

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

Es una versión mejorada de http del módulo @angular/http con las siguientes mejoras:

• Los interceptores permiten que la lógica de middleware se inserte en la tubería
• Solicitud inmutable / objetos de respuesta
• Eventos de progreso para la carga de solicitudes y la descarga de respuestas

Puede leer acerca de cómo funciona en la guía de Insider sobre interceptores y la mecánica de HttpClient en Angular .

• Acceso de cuerpo de respuesta síncrona mecanografiada, incluida compatibilidad con tipos de cuerpo JSON
• JSON es un valor predeterminado asumido y ya no necesita ser analizado explícitamente
• Verificación posterior a la solicitud y marco de prueba basado en vaciado

En adelante, el antiguo cliente http quedará en desuso. Aquí están los enlaces al mensaje de confirmación y angular.io/guide/http .

También preste atención a que se inyectó http antiguo utilizando el token de clase Http lugar del nuevo HttpClient :

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

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

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

Además, el nuevo HttpClient parece requerir tslib en tiempo de ejecución, por lo que debe instalarlo npm i tslib y actualizar system.config.js si está usando SystemJS :

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

Y necesita agregar otra asignación si usa SystemJS:

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

Answer 5

HttpClient es una nueva API que viene con 4.3, ha actualizado las API con soporte para eventos de progreso, deserialización json por defecto, interceptores y muchas otras características excelentes. Ver más aquí angular.io/guide/http

Http es la API más antigua y eventualmente quedará en desuso.

Dado que su uso es muy similar para tareas básicas, recomendaría usar HttpClient ya que es la alternativa más moderna y fácil de usar.