Como ya hemos aprendido en la lección anterior, el protocolo HTTP
nos permite comunicarnos entre un cliente y un servidor.
Ya hemos visto algunos detalles sobre el protocolo HTTP en la lección anterior.
En esta lección, vamos a explorar el soporte angular para HTTP.
Angular admite HTTP a través del cliente HTTP angular.
Vamos a ver cómo podemos aprovechar
el cliente HTTP angular para la comunicación cliente-servidor,
en nuestra aplicación Angular.
Los dos ejercicios que siguen esta conferencia,
exploraremos el uso práctico de
el cliente HTTP Angular dentro de nuestra aplicación Angular.
Veamos un poco de los detalles del cliente HTTP en esta conferencia.
Como es de esperar,
Angular aprovecha el protocolo HTTP para permitir la comunicación entre
nuestro cliente Angular y el servidor basado en HTTP.
La mayoría de los navegadores modernos, normalmente utilizados para admitir
la forma XMLHttpRequest o XHR de comunicarse con el servidor.
Cada vez más, los navegadores están adoptando la API Fetch,
, que es un reemplazo moderno para XMLHttpRequest como
una forma de proporcionar comunicación entre el navegador y el servidor.
Angular aprovecha esto para comunicarse con el servidor utilizando el cliente HTTP.
Vamos a ver el uso del cliente HTTP y cómo podemos usar HttpClientModule,
dentro de nuestra aplicación Angular para habilitar la comunicación cliente-servidor.
Cualquier comunicación entre el cliente y el servidor como esperamos,
va a ser de naturaleza asíncrona.
Entonces, lo que significa que su cliente necesita
para esperar a que los datos se entreguen desde el sitio del servidor.
En consecuencia, su cliente necesita ser
configurado para hacer frente a este retraso en la obtención de los datos.
En el módulo anterior,
ya habíamos configurado nuestras aplicaciones cliente para
poder mostrar el spinner de progreso en la interfaz de usuario,
para mantener informado al usuario sobre el hecho de que hay un retraso en la obtención de los datos,
antes de que la vista sea renderizada.
Eso viene de nuestra ayuda en esta lección,
donde obviamente tenemos que lidiar con el retraso para obtener datos del sitio del servidor.
El acceso a los datos dentro de nuestra aplicación Angular,
siempre es mejor delegar esta responsabilidad en el servicio.
Por lo tanto, dejamos que el servicio se ocupe de la interacción con el servidor,
y luego su componente obtiene los datos llamando a los métodos del servicio.
La interacción del servicio de componentes que ya hemos configurado en el módulo anterior.
Así que, todo lo que tenemos que hacer,
es actualizar nuestros servicios para aprovechar el módulo HTTP para comunicarse con el servidor,
para obtener los datos del servidor y luego,
proporcionar los datos al componente.
El propio servidor HTTP,
devolverá los datos a nuestro cliente y
nuestro módulo HTTP devuelve los datos a nuestro servicio en el seguimiento observable.
Este observable, será procesado y
luego devuelto como observable a nuestro componente.
Esa parte ya hemos configurado en el módulo anterior.
Así, aprovecharemos eso para permitirnos rápidamente
deslizando la comunicación HTTP entre el cliente y el servidor,
entre el servicio y el sitio del servidor,
y luego el resto de la infraestructura
que ya está en su lugar en nuestra aplicación angular
puede tratar fácilmente con el entrega de lo observable a nuestro componente,
y el componente que ya suscribe a ese observador.
El efecto adicional con el que vamos a tratar,
es cómo manejar errores.
Hablaremos de eso con un poco más de detalle en las diapositivas posteriores.
Entonces, como ya mencioné,
el cliente HTTP devuelve un observable.
Entonces, cuando llame al módulo HTTP,
para que configure su servicio para hacer uso del módulo HTTP,
y con el módulo HTTP,
le proporciona varios métodos que coinciden con los verbos get,
put, post y delete del protocolo HTTP.
Por lo tanto, los métodos get, put, post,
y delete son compatibles automáticamente con el módulo HTTP.
Por lo tanto, aprovechará estos métodos para poder ejecutar
esas operaciones particulares en el sitio del servidor.
Por lo tanto, cuando emita una llamada HTTP get,
está solicitando que los datos se entreguen desde el servidor al cliente.
El cliente HTTP a su vez,
procesará el observable que se entrega a través del módulo HTTP angular,
y luego entregará ese observable a nuestro componente.
Dentro de nuestro componente, ya suscribimos
al observable que es entregado por nuestro servicio,
y así manejar los datos que se envían a través de lo observable,
es bastante sencillo para nosotros.
Si la aplicación Angular es
comunicándose con un servidor que devuelve la respuesta en formato JSON,
los clientes HTTP Angular obtienen el método en sí
analiza la respuesta JSON del servidor en un objeto anónimo.
El cliente en sí, no sabe exactamente cómo interpretar la forma de este objeto.
Por lo tanto, podemos ayudar al cliente HTTP especificando la forma del objeto,
especificando una declaración de una clase JavaScript,
que especifica la forma del objeto para que la salida
del get pueda ser consumida fácilmente por la aplicación.
Así que, en el ejercicio,
me verás declarando.
Por ejemplo, diremos esto.http.get,
y luego dentro de los corchetes angulares,
especifico plato allí.
Entonces, de esa manera,
los datos entrantes para la solicitud get del sitio del servidor se convertirán en
un objeto dish y luego podrán ser consumidos inmediatamente
por mi componente cuando esté diseñando el contenido.
Ahora, si lo requiere,
puede obtener acceso a la respuesta completa que viene desde el sitio del servidor.
Pero eso sería solo en circunstancias específicas,
donde necesita acceso a, por ejemplo,
los encabezados del mensaje de respuesta HTTP entrante, etc.
Pero para la mayoría de los propósitos,
simplemente declarando la forma del objeto,
podemos obtener fácilmente los datos JSON analizados automáticamente de una manera
que puede ser consumido por nuestra aplicación Angular más fácilmente.
Como esperamos, la comunicación
entre el cliente y el servidor no será libre de errores.
Los errores van a aparecer por muchas razones diferentes.
Puede ser que la conexión no se establezca entre el cliente y el servidor,
puede ser el hecho de que la respuesta del servidor se pierde,
puede ser el hecho de que el servidor no puede encontrar los datos que está buscando,
y así devuelve un 404 indicando que el servidor
no puede proporcionar los datos para usted o los datos que faltan en el sitio del servidor, etc.
Por lo tanto, su cliente necesita lidiar con todos estos errores.
Así que, dentro de nuestro servicio,
vamos a configurar nuestro servicio para poder detectar este error.
Por lo tanto, aquí es donde el uso del método catch que es compatible con HTTP,
nos permite detectar el error, procesar ese error,
y luego enviar el mensaje de error a nuestro componente,
y luego dejar que el componente se ocupe del mensaje de error en
de la manera que parezca apropiado.
Ahora, dentro de nuestro componente por ejemplo,
mostraremos la información de error que
obtuvimos en nuestra vista para indicar al usuario,
que se produjo un error en la obtención de los datos del sitio del servidor.
Así que, dentro del servicio,
tenemos que procesar este error.
Ahora, cuando esta información de error obtenida de
el sitio del servidor a través del cliente HTTP se procesa dentro de nuestro servicio,
entonces vamos a convertir eso en una cadena,
y esa cadena se pasará a nuestro componente mediante el método de lanzamiento observable.
Entonces, el método throw nos permite lanzar un error.
Entonces, debido a que en nuestro componente
nos suscribimos a este observable dentro del método de suscripción,
entonces necesita lidiar con el error.
Así que, en la parte de suscripción,
antes hemos visto sólo una función que se especifica para la suscripción,
y que trata de la operación normal.
Pero junto con eso,
también podemos proporcionar una segunda función a la que se entregará el error.
Entonces, me verás configurando la parte de suscripción de mi componente
usando una segunda función especificada dentro del método de suscripción allí,
como un ejemplo ilustrado por este código aquí.
De esa manera, el error será capturado dentro de
mi componente y luego el mensaje de error apropiado,
información será entregada al usuario dentro de la vista.
Por lo tanto, veremos eso como parte del segundo ejercicio en esta lección particular.
Con esta rápida comprensión del cliente HTTP,
pasaremos ahora a los ejercicios donde emplearemos
el cliente HTTP Angular proporcionado a través del módulo HTTP de la biblioteca HTTP Angular,
para permitirnos comunicarnos con nuestro servidor.