Resumen: mostrar cómo usar el cliente HTTP de Angular para hacer peticiones y consumir API REST usando métodos como GET, POST, PUT y DELETE además de JSON para el intercambio de datos.
En este post vamos a crear un servicio de Angular que a su vez usará el HttpClientModule
para hacer peticiones HTTP. Después vamos a consumir ese servicio desde cualquier componente.
En app.module.ts
importamos HttpClientModule
y lo colocamos en imports
.
Después, en el lugar en donde lo vayamos a usar importamos HttpClient
de @angular/common/http
y lo inyectamos en el constructor como veremos en el servicio.
Como buena práctica al consumir servicios web con Angular debemos crear un servicio. No voy a profundizar en ellos porque ya mostré un tutorial sobre Angular services anteriormente.
El nombre de mi servicio es PersonasService
y queda como a continuación.
Por cierto, puedes ver que en algunas funciones recibo argumentos que son de la clase Persona
. La clase es la siguiente:
De este modo aprovechamos un poco el tipado fuerte que tiene TypeScript para regresar, por ejemplo, un arreglo de tipo Persona
, y así tener certeza de que la lista que regresa el servidor es de tipo Persona
.
Lo mismo para las otras clases.
En el servicio estamos haciendo las 4 operaciones básicas pero las explicaré aquí por verbo HTTP. Comenzamos definiendo la URL base, esto no es obligatorio pero lo hago así por si en el futuro cambio la ruta del servidor.
Ahora vemos el método GET:
Invocamos a get
del cliente HTTP a la ruta obtenerPersonas.php
, el parámetro que indicamos es la ruta.
Podemos enviar datos con POST. Los mismos serán codificados como JSON (recuerda colocar los campos de la clase como públicos porque si son privados no serán tomados en cuenta).
Queda así:
El segundo argumento ahora son los datos que se envían. Lo mismo pasa con el método put:
Finalmente el método DELETE que no lleva cuerpo, pero podemos usar la url:
Por cierto, si no conoces esas comillas, son backticks y permiten combinar cadenas de mejor manera.
Ahora que tenemos el servicio y el cliente HTTP de Angular podemos importar al mismo en un componente. Por ejemplo para obtener las personas:
Invocamos al servicio y luego a subscribe, que devolverá una “promesa” si lo queremos ver así, para que más tarde traiga un arreglo de tipo Persona
.
Al final lo imprimimos:
app.module.ts
HttpClient
; podemos inyectarlo en un constructorsubscribe
para tener la respuesta.Las comillas son backticks y la flecha =>
funciona como las funciones flecha en JavaScript.
Muy pronto traeré la parte 2 con una demostración y conexión a PHP; aunque Angular se puede conectar a cualquier servidor 😉
En este artículo te voy a enseñar a monitorear la cola de impresión de una…
En mi blog te he enseñado a usar youtube-dl para descargar vídeos con permiso del…
Siguiendo con los tutoriales que consumen la API de los Bots de Telegram con cURL…
En un post previo te enseñé a enviar un mensaje en nombre de un Bot…
En este artículo te voy a mostrar una guía para imprimir en una impresora térmica…
La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…
Esta web usa cookies.