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