"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Peticiones Http en Angular 5

Siempre es importante tener claro como hacer peticiones Http en Angular 5, porque tarde o temprano nos vamos a encontrar en una situación donde las necesitemos.

Aunque seas nuevo en el mundo Angular seguramente te suene que es eso de hacer peticiones Http, por ejemplo cuando cargas un archivo externo estas haciéndolas, las peticiones ajax no dejan de ser peticiones Http, cuando consumes una API Rest lo mismo…

Raro es el desarrollo donde no tengas que hacer alguna, por eso Angular nos lo facilita con un módulo que a día de hoy se llama HttpClient, podéis ver la documentación oficial aquí

Si inspeccionamos el código, aquí os dejo también el enlace al fichero en github, vemos que este módulo expone una serie de métodos que son los que nosotros vamos a poder usar a la hora de hacer peticiones Http en Angular 5.

Lo primero que destaca es que todos ellos devuelven un observable. Si no sabemos lo que son pensemos en ellos como promesas a las que debemos suscribirnos si queremos «escuchar» sus respuestas al estilo de un listener de toda la vida y que además pueden ejecutar de forma encadenada distintas funciones para manipular los datos de respuesta.

Si vemos los métodos nos daremos cuenta de que la mayoría se corresponden con distintos verbos http.

HTTP define un conjunto de métodos de petición para indicar la acción que se desea realizar para un recurso determinado. Aunque estos también pueden ser sustantivos, estos métodos de solicitud a veces son llamados HTTP verbs.

Por ejemplo para hacer un CRUD generalmente usamos Get/Post/Put/Delete respectivamente para las operaciones de Creación, Lectura, Modificación y Borrado.

Pero existen otros verbos que también están contemplados en este módulo como Head/Options/Patch.

Modo de uso

Siguiendo la pauta que nos marcan sus desarrolladores lo primero que debemos hacer para usar este módulo es importarlo en la raíz, para ello vamos al app.module.ts y hacemos esto…

Una vez hecho este paso ya podemos inyectarlo en cualquier clase, como pudieran ser los servicios o los componentes de esta manera.

Ahora ya podemos usar el módulo de http, e instanciarlo en el constructor, para poder usar cualquiera de los métodos que vimos antes.

Aunque como antes se dijo esto lo podemos hacer en cualquier clase, lo normal es que para este tipo de operaciones por una cuestión de usabilidad y de mantener una estructura lógica se usen por lo general dentro de los servicios.

Hacer una petición

Ahora que ya está todo listo vamos a ver como hacer una petición, voy a seguir poniendo los ejemplos oficiales que están bastante bien.

Nos plantean hacer una petición get para traernos un fichero json muy simple.

Como mencionamos para vamos a usar los servicios para ello, así que modificamos el de arriba añadiendole un nuevo método.

Ahora en cualquier componente que tengamos podemos inyectar ese servicio y usar el método getConfig, como devuelve la respuesta de la petición http, y como todas las respuestas son observables, tenemos que suscribirnos para escuchar lo que devuelve.

En este ejemplo vemos como inyectar un servicio dentro de un componente y después suscribirnos a uno de los métodos que usar peticiones Http en Angular 5.

Al suscribirnos hemos usado las arrow functions para parsear directamente la respuesta contra el objeto config, si quieres profundizar en las características de las arrow functions pulsa aquí.

A mayores podemos usar interfaces para definir el tipado de la respuesta o encadenar distintas funciones para manipular los datos, pero lo que es la petición se hace así.

Para el resto de tipos de petición el proceso es el mismo.

Es tan sencillo que no es necesario dar más explicaciones, para trastear lo mejor es que crees una API e intentes consumirla para hacer un CRUD.

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)