Servicios, HTTPClient y AJAX en Angular
Servicios
Los servicios son clases cuyo objetivo principal es abstraer la lógica principal de la aplicación , están enfocadas a tener los métodos y la funcionalidad que interactúan con un servidor externo , en otras palabras es un proveedor de datos . Es de las partes de la arquitectura de una aplicación Angular más importantes ya que si no tendríamos mucho código dentro de los componentes relacionado con las peticiones AJAX o para hacer gran cantidad de lógica cuando lo útil seria sepáralo en un clase externa.
Crear un servicio
Para crear un servicio , tenemos múltiples formas pero usaremos Angular CLI para la creación del scaffolding , mediante el siguiente comando :
- ng generate service miservicio
Todo servicio necesita el decorador @Injectable para poder ser utilizado y gracias a el se puede agregar este a un módulo para que se pueda usar en cualquiera de los componentes que pertenezcan al módulo. En el módulo , importas la clase del servicio y lo declaras en el array de «providers»
Para utilizar un servicio en un componente se utiliza la inyección de dependencias y en el constructor de este se declara como parámetro, cuantos servicios tengamos o quisiéramos usar .
El objetivo de los servicios es juntar la lógica de negocio en los distintos servicios y realizar peticiones a servidores para consumir datos. Esto implica realizar peticiones AJAX y para facilitarnos el trabajo Angular tiene un modulo que nos permite hacer estas peticiones que se llama HttpClientModule ,que deberemos primeramente importarlo en el módulo donde lo queramos usar y después inyectarlo en la clase del componente donde vaya a ser usado .
Paso a paso
En el ejemplo que vamos a realizar , queremos recuperar los datos de unos usuarios , mostrar estos usuarios , acceder a cada uno de ellos , actualizarlos y borrarlos. Para ello crearemos el servicio y lo declararemos en el modulo tal y como se ha explicado anteriormente .
- Crearemos un fichero Gloabal.ts donde tendremos alojada la url de la api para consumirla de una forma más eficaz y evitar errores al introducir la url.
2. Vamos a crear todos los métodos que necesitamos para trabajar con los datos como hemos citado anteriormente. En el constructor del servicio inyectaremos en una variable privada el objeto HttpClient para asi poder a través de esta variable utilizar todos los métodos Ajax (GET , POST , PUT, DELETE) y HttpHeaders para modificar las cabeceras y así indicar el tipo de objeto que estamos enviando para actualizar(PUT) o crear (POST).
También realizaremos la siguiente importación «import { Observable } from ‘rxjs’;» .El observable nos permite utilizar el método subscribe que nos sirve para ver tanto la respuesta a la petición como cualquier posible error. Para ello declaramos el primer método getUsuarios que va a ser de tipo observable y el tipo de datos que va a devolver será de tipo any, para así poder recoger cualquier dato. Para el método GET solo necesitamos la url de la api que nos la trae el objeto Global y la solicitud que nos indica el api para recuperar dichos usuarios.
En los métodos PUT and DELETE habrá que pasar por parámetro el id del usuario para actualizarlo o borrarlo y utilizar la solicitud que el API indique , por el resto es igual al método GET.
En los métodos POST y PUT tenemos que establecer las cabeceras que indicaran el tipo de objeto que enviaremos o bien para actualizar o para crear. En el caso de esta api necesitamos saber cual es el usuario mediante el id que queremos actualizar , así que en el método de actualizar a parte del objeto , pasamos el id por parámetro.
De esta forma tendríamos nuestro servicio completo, para utilizarlo mediante la inyección en cualquier componente y así tendríamos acceso a todos los métodos creados.
Ahora solo nos queda usar el api desde el componente utilizando el servicio y pasando los parámetros que necesite cada método.
Autor/a: Max Alexander Gonzalez Morales
Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma
Centro: Tajamar
Año académico: 2020-2021