Como usar HttpClient en Angular 7 (Servicios, REST)

Publicado en Nov 6, 2017

En Angular 5 han introducido un nuevo módulo para hacer peticiones HTTP y hacer peticiones a servicios REST. Este nuevo módulo es HttpClient y no sustituye al HttpModule que ya existía en Angular 4, ambos módulos convivirán. En teoría este HttpClient en Angular 7 tiene un poco más de rendimiento y nos ahorra escribir algunos caracteres.

Este nuevo módulo es la única novedad significativa entre Angular en su ultima versión.

Vamos a ver como usar el nuevo HttpClient en Angular.

Configuración del módulo HttpClient

Lo primero que debemos hacer es importar este módulo HttpClient en el fichero app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

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

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ErrorComponent,
    ProductosListComponent,
    ProductoAddComponent,
    ProductoDetailComponent,
    ProductoEditComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule, // cargamos el módulo en el array de imports
  ],
  providers: [
    appRoutingProviders
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ahora ya podemos usar el HttpClient en cualquier componente de nuestra aplicación, pero nosotros vamos a ir un poquito mas allá y vamos a usarlo en un servicio de Angular 7.

En el servicio debemos importar HttpClient(para hacer las peticiones al API REST por AJAX) y HttpHeaders(para establecer cabeceras en las peticiones):

import {HttpClient, HttpHeaders} from '@angular/common/http';

Despues tenemos que inyectar el objeto HttpClient en una propiedad de la clase, podemos hacerlo en el constructor:

constructor(
    public http: HttpClient
){}

Y ahora ya podemos hacer peticiones al API REST usando el HttpClient en Angular 7.

Petición GET

Para hacer una petición usando el método HTTP GET, vamos a crear un método que haga la petición:

getProductos(): Observable<any>{
	return this.http.get(this.url+'productos');
}

Es importante indicarle al método que devolverá un Observable y el tipo de dato que devolverá el observable al hacer el subscribe, si el api rest devuelve un objeto que no corresponde 100% con los modelos que tengas en Angular, es mejor indicarle el tipo any.

En el componente podríamos llamar a este método del servicio de la siguiente manera:

this._productoService.getProductos().subscribe(
			result => {
				
				if(result.code != 200){
					console.log(result);
				}else{
					this.productos = result.data;
				}

			},
			error => {
				console.log(<any>error);
			}
		);

Petición POST

Ahora haremos una llamada por POST al backend, crearemos un método en nuestro servicio:

addProducto(producto: Producto): Observable<any>{
		let json = JSON.stringify(producto);
                
//El backend recogerá un parametro json
		let params = "json="+json;

                //Establecemos cabeceras
		let headers = new HttpHeaders().set('Content-Type','application/x-www-form-urlencoded');
		
		return this.http.post(this.url+'productos', params, {headers: headers});
	}

En este ejemplo hemos visto como establecer y enviar cabeceras en las peticiones AJAX.

Código del servicio de Angular usando HttpClient

El servicio quedaría así:

import { Injectable } from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Producto } from '../models/producto';
import { GLOBAL } from './global';

@Injectable()
export class ProductoService{
	public url: string;

	constructor(
		public http: HttpClient
	){
		this.url = GLOBAL.url;
	}

	getProductos(): Observable<any>{
		return this.http.get(this.url+'productos');
	}

	addProducto(producto: Producto): Observable<any>{
		let json = JSON.stringify(producto);
		let params = "json="+json;
		let headers = new HttpHeaders().set('Content-Type','application/x-www-form-urlencoded');
		
		return this.http.post(this.url+'productos', params, {headers: headers});
	}


}

Con esto ya sabemos usar el módulo HttpClient de Angular 7 en nuestro proyectos, prácticamente es igual que el anterior módulo Http que teníamos en Angular 4, que sigue estando en Angular 5, esto simplemente es una alternativa al HttpModule.

Más información:
Documentación HTTPClient