HTTP en Angular

 

 

 

Para realizar solicitudes HTTP vamos a usar dos API diferentes:

·         interfaz XMLHttpRequest.

·         API fetch ().

Angular usa HttpClient de @angular/common/http la cual es una API HTTP de cliente simplificada basada en la interfaz XMLHttpRequest.

Sus beneficios incluyen:

·         Características de comprobabilidad

·         Objetos de solicitud y respuesta escritos,

·         Intercepción de solicitud y respuesta,

·         API observables

·         Manejo simplificado de errores.

·         Seguimiento automático de redirecciones.

·         Administración de Cookies.

Es utilizado par establecer comunicaciones entre aplicaciones web- front mediante el protocolo HTTP.

 

Para administrar los datos en el servidor remoto, hacemos usando la API HttpClient.

Vamos a usar los siguiente metodos con los cuales vamos a manejar datos en el servidor remoto:

• GET
• POST
• PUT
• DELETE

 Creación de un servidor  JSON

Primero vamos a crear un servidor JON

Instalamos el servidor:

npm install -g json-server

Creamos una nueva carpeta llamada datosJSON

Creamos un archivo con la extension .json y lo guardamos en la carpeta creada. 

usuarios.json: 

{

  "usuarios": [

    {     

      "id": 1,

      "dni": "10A",

      "nombre": "Juan",

      "apellido": "Garcia",

      "direccion": "C/ el pez"

    },

    {     

      "id": 2,

      "dni": "10B",

      "nombre": "Antonio",

      "apellido": "Lopez",

      "direccion": "C/ la oca"

    },

    {     

      "id": 3,

      "dni": "10C",

      "nombre": "Maria",

      "apellido": "Perez",

      "direccion": "C/ Madrid"

    },

    {     

      "id": 4,

      "dni": "10D",

      "nombre": "Pedro",

      "apellido": "Fernandez",

      "direccion": "C/ Sevilla"

    },

    {     

      "id": 5,

      "dni": "10E",

      "nombre": "Luis",

      "apellido": "Lopez",

      "direccion": "C/ Segovia"

    }

  ]

}

Arrancamos el servidor:

json-server --watch dataJSON/usuarios.json

Donde usuarios.json es el archivo json a cargar en el servidor

En la siguiente dirección tenemos la dirección del servidor:

http://localhost:3000

Vamos a usar la URL de prueba:

 http://localhost:3000/usuarios  para obtener los datos de json. 

 

Creacion del servicio Http

 

Lo importaremos a través del paquete @angular/common/http

En  app.module.ts:

 

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

 

Y lo ponemos en los imports

 

imports: [BrowserModule, HttpClientModule]

 

En app.components.ts:

 

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

En la clase app.component.ts, creamos un constructor y lo inyectamos de la siguiente manera:

constructor(private http: HttpClient) {

  }

ngOnInit() {     

      this.http.get(nombreUrl, parametrosPeticion).suscribe();

}

 

Metodos de HttpClient

• get(): Este método se usa para obtener los datos de un documento.
• post(): Este método se usa para añadir nuevos campos a un documento.
• delete(): Este método se usa para borrar un documento.
• patch(): Este método se usa para actualizar una propiedad de un registro.
• put(): Este método se usa para sobreescribir un documento en una version completamente nueva.
• head(): Este método se usa para obtener los datos de un documento, sin el cuerpo de la respuesta.
• request(): Construye un observable para una solicitud HTTP genérica que, cuando se suscribe, dispara la solicitud a través de la cadena de interceptores registrados y al servidor.
• jsonp()
• options()

 

Metodo get

Con este método lo usamos para obtener los datos de un documento en url.

Donde get está formado por la url y los parámetros de la petición:

 

this.http.get(url,{ parámetros de la petición })

 

A su vez los parámetros de la petición:

 

{

responseType: 'json',

headers: {'content-type': 'application/json'},

observe: 'body',

params: {id: 'P0001'},reportProgress:true}

}

 

Donde params puede ser sustituida por:

params: HttpParams (esta clase es inmutable una vez construida no se puede modificar)

this.params = new HttpParams().set(‘nombreParametro1’,valor). set(‘nombreParametro2’,valor)…. set(‘nombreParametroN’,valor).

this.http.get(url, {params: this.params}).subscribe();

 

Ejemplo de los parámetros de la petición:

{ responseType: 'json',

      headers: {

        'content-type': 'application/json'

      },

      observe: 'body',

      params: {

        id: 'P0001',

      },

      reportProgress: true

}

Suscripción

HttpClient.get(url,{parametros}).suscribe(parametros)

HttpClient.get(url,{parametros}).suscribe((variable:any) => {console.log(variable)})

Mediante suscribe se almacena el resultado en la variable que dispara el codigo almacenado entre los {}

Suscribe tiene tres parametros:

{

data => console.log(data),

err => console.log(data)

() => console(“Petición finalizada”)

};

 

Ejemplo:

 

Vamos a ver todos los usuarios de la url http://localhost:3000/usuarios

 

app.component.ts:

 

import { Component, OnInit } from '@angular/core';

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

  title = 'Angular8';

  httpdatos: string;

  constructor(private http: HttpClient) {

  }

 

ngOnInit() {

  this.http.get('http://localhost:3000/usuarios', {responseType : 'json'}).subscribe(datos => this.getDatos(datos));

}

getDatos(datos: any) {

  this.httpdatos = datos;

 }

}

 

En el método de getDatos, almacenaremos los datos en una variable httpdatos. Los datos se muestran en el navegador utilizando sobre esta variable httpdatos, que se realiza en el archivo app.component.html.

 

app.component.html:

 

<ul *ngFor = "let datos of httpdatos">

  <li>Dni : {{datos.dni}} Nombre: {{datos.nombre}} Apellido: {{datos.apellido}} Direccion: {{datos.direccion}} </li>

</ul>

 

 

Salida:

• Dni: 10A Nombre: Juan Apellido: Garcia Direccion: C/ el pez

• Dni: 10B Nombre: Antonio Apellido: Lopez Direccion: C/ la oca

• Dni: 10C Nombre: Maria Apellido: Perez Direccion: C/ Madrid

• Dni: 10D Nombre: Pedro Apellido: Fernandez Direccion: C/ Sevilla

• Dni: 10E Nombre: Luis Apellido: Lopez Direccion: C/ Segovia

 

 

Para hacer una peticion del registro numero 2:

 http://localhost:3000/usuarios?id=2

Vamos a crear una variable llamada idParametro con el valor 2 y se lo vamos a pasar a http.get

app.component.ts:

import { Component, OnInit } from '@angular/core';

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

  title = 'Angular8';

  httpdatos: string;

  constructor(private http: HttpClient) {

  }

 

ngOnInit() {

  this.http.get('http://localhost:3000/usuarios', {responseType : 'json', params: { id: '3',

  },

}).subscribe(datos => this.getDatos(datos));

}

getDatos(datos: any) {

  this.httpdatos = datos;

 }

}

 

Salida

·         Dni: 10C Nombre: Maria Apellido: Perez Direccion: C/ Madrid

Metodo post

Con este metodo lo usamos para añadir nuevos campos a un documento situado en la url http://localhost:3000/usuarios

app.component.ts:

import { Component, OnInit } from '@angular/core';

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

 

  usuario = {

    id: '',

    dni : '',

    nombre: '',

    apellido: '',

    direccion: '',

  };

  err: any;

  v = false;

  constructor(private http: HttpClient) {

  }

  ngOnInit() {

    interface Usuario {

      id: number;

      nombre: string;

      apellido: string;

      direccion: string;

    }

    this.http.post<Usuario>('http://localhost:3000/usuarios', {

      id: 6, dni : '10F', nombre: 'Juan', apellido: 'string',

      direccion: 'C/ El rio',

    }).subscribe(

      {

        next: datos => this.getDatos(datos),

        error: error => this.setError(error)

      }

    );

  }

  getDatos(datos: any) {

       this.usuario = datos;

  }

  setError(error: any) {

    this.v = true;

    this.err = error;

  }

}

app.component.html:

<p>Usuario Insertado: </p>

<ng-container *ngIf="this.v else mostrarUsuario" >

<p>Hay un error:  {{this.err}}</p>

</ng-container>

<ng-template #mostrarUsuario>

  <p>Dni: {{usuario.dni}} Nombre: {{usuario.nombre}} Apellido: {{usuario.apellido}} Direccion: {{usuario.direccion}} 

  </p>    

</ng-template> 

 

Usuario Insertado:

Dni: 10F Nombre: Juan Apellido: string Direccion: C/ El rio

 

Metodo delete

Con este método lo usamos para borrar un campo de un documento situado en la url http://localhost:3000/usuarios

app.module.ts:

import { Component, OnInit } from '@angular/core';

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {  

  err: any;

  v = false;

  constructor(private http: HttpClient) {

  }

  ngOnInit() {

 

    this.http.delete('http://localhost:3000/usuarios/1')

      .subscribe(

        {

           error: error => this.setError(error)

        }

      );

  }

  setError(error: any) {

    this.v = true;

    this.err = error;

  }

}

app.component.html:

<ng-container *ngIf="this.v else mostrarMensaje" >

<p>Hay un error de borrado o no existe el usuario o la url no es correcta

</p>

</ng-container>

 

<ng-template #mostrarMensaje>

  <p>Usuario borrado correctamente</p>    

</ng-template> 

 

 

Metodo Patch

Este método se usa para actualizar una propiedad de un registro de un documento situado en la url http://localhost:3000/usuarios

app.module.ts:

import { Component, OnInit } from '@angular/core';

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit { 

  err: any;

  v = false;

  constructor(private http: HttpClient) {

  }

  ngOnInit() {

    this.http.patch('http://localhost:3000/usuarios/1', {

    nombre : 'Jose Luis'}).subscribe(

        {

           error: error => this.setError(error)

        }

      );

  }

  setError(error: any) {

    this.v = true;

    this.err = error;

  }

app.component.html:

<ng-container *ngIf="this.v else mostrarMensaje" >

<p>Hay un error de Modificado o no existe el usuario o la url no es correcta

</p>

</ng-container>

 

<ng-template #mostrarMensaje>

  <p>Usuario Modificado correctamente</p>    

</ng-template> 

}

 

Metodo Put

Lo vamos a usar para reemplazar completamente el valor de un recurso por uno nuevo.

app.module.ts:

import { Component, OnInit } from '@angular/core';

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit { 

  err: any;

  v = false;

  constructor(private http: HttpClient) {

  }

  ngOnInit() {

    this.http.put('http://localhost:3000/usuarios/1',

     {nombre : 'Jose Luis',

     apellido : 'Del amo'

    },

 

     ).subscribe(

        {

           error: error => this.setError(error)

        }

      );

  }

  setError(error: any) {

    this.v = true;

    this.err = error;

  }

}

 

app.component.html:

<ng-container *ngIf="this.v else mostrarMensaje" >

<p>Hay un error de remplazadado o no existe el usuario o la url no es correcta

</p>

</ng-container>

 

<ng-template #mostrarMensaje>

  <p>Usuario reemplazado correctamente</p>    

</ng-template> 

 

Metodo head

Lo vamos a usar para la obtencion de los datos de un documento, sin el cuerpo de la respueta, es utilizado para probar accesibilidad, hipervínculos, para verificar si un documento ha sido modificado recientemente y para obtener meta información sobre un recurso.

 

Metodo request

Construye un observable para una solicitud HTTP genérica que, cuando se suscribe, dispara la solicitud a través de la cadena de interceptores registrados y al servidor.

 

Metodo jsonp

JSONP es una forma de evitar CORS(Los datos de solicitud tienen que pertenecer al mismo dominio)  al obtener datos de un servicio REST.

 

Metodo options

Es utilizado en CORS para validar si el servidor acepta peticiones de diferentes orígenes y sirve para describir las opciones de comunicación para el recurso de destino.