Header Ads Widget

Ticker

6/recent/ticker-posts

Cómo realizar solicitudes HTTP en Angular usando Observables

 


Para obtener datos en Angular, podemos usar Observables con http para obtener datos. Una aplicación angular usará http a través de una solicitud GET para obtener datos de un servidor back-end. El back-end podría funcionar con cualquier número de tecnologías del lado del servidor como Java, PHP, Python o incluso JavaScript del lado del servidor en forma de Node.js. Se envía una respuesta http desde el servicio web back-end a la aplicación angular del lado del cliente. En este tutorial, aprenderemos sobre cosas como Observables, Reactive Extensions, HTTP Requests y cómo se integran en una aplicación angular.


Extensiones observables y reactivas

Las extensiones reactivas, o RxJS, representan una secuencia de datos como una secuencia observable . La secuencia observable se denomina simplemente observable . El propósito de un Observable es administrar datos asincrónicos, como lo que podría obtener cuando espera que los datos lleguen a través de una red mediante HTTP. Un Observable trata los eventos como una colección. Una forma de pensar en un Observable es la de una matriz cuyos elementos se pueblan de forma asincrónica a lo largo del tiempo. En un Observable, tendrías un método que se suscribe para recibir notificaciones a medida que llegan nuevos datos. El marco angular usa Observables para hacer su trabajo asincrónico.


Observables angulares

Los observables ofrecen beneficios significativos sobre otras técnicas para el manejo de eventos, la programación asincrónica y el manejo de múltiples valores. Los observables son declarativos, es decir, usted define una función para publicar valores, pero no se ejecuta hasta que un consumidor se suscribe.


Operadores observables

Funciones como mapa, filtro, toma y combinación son ejemplos de operadores observables. Transforman la fuente observable y componen una nueva observable mientras procesan cada valor a medida que se emite. Una forma de comprender mejor los Observables es familiarizarse con los diagramas de mármolAquí, vemos un ejemplo de la función de mapa que transforma cada valor a 10 veces su estado original.
rx observable de la función de mapa


Cómo componer operadores observables

Los operadores observables se componen mediante un método de tubería conocido como Operadores de tubería . Aquí hay un ejemplo.

La salida para esto en la consola sería la siguiente:

0

6

12

18

Entonces, ¿qué sucede en el código anterior? Bueno, primero importamos dos paquetes comunes cuando trabajamos con Observables. Esos son los paquetes rxjs y rxjs / operator . Luego, la línea de fuente constante $: Observable <número> = rango (0, 10) crea un flujo observable de números en el rango de 0 a 10. Tenga en cuenta el sufijo del signo de dólar que indica que una variable particular tiene un Observable. Para cualquier variable que ahora tenga un observable, tenga en cuenta que ahora podemos usar el.pipe()método para pasar una o varias funciones de operador que pueden trabajar y transformar cada elemento de la colección observable. Entonces, este ejemplo toma cada número en el rango de 0 a 10 y lo multiplica por 2. Luego, usamos la función de filtro para filtrar el resultado solo a los números impares. Una vez que se completa, nos suscribimos al observable y desconectamos el resultado. ¡Muy genial!


Promesas vs Observables

Una Promesa se usa para manejar un solo evento cuando una operación asíncrona se completa o falla mientras que un Observable es como un Stream y permite pasar cero o más eventos donde se llama a la devolución de llamada para cada evento. Aquí hay una tabla que muestra algunas de las diferencias.

Promesa

Observable

Proporciona un valor futuro único
Emite múltiples valores a lo largo del tiempo
No perezoso
Perezoso
No se puede cancelar
Capaz de cancelar
Se puede usar con mapa, filtro, reducción y otros operadores

Enviar solicitud HTTP en angular

Ahora que sabemos un poco sobre Observables, configuremos nuestra aplicación de juegos para obtener los datos de los juegos de una API.


Importar HttpClientModule

Primero, necesitamos importar el módulo HttpClientModule a la aplicación. Podemos hacer esto en app.module.ts así.


Usar el servicio de cliente Http en el juego

En el tutorial de inyección de dependencia del servicio angular , codificamos los datos de los juegos en el archivo game.service.ts directamente. Ahora, podemos eliminar esos datos y actualizar el servicio para realizar una solicitud HTTP a un servidor web para obtener los datos. A continuación, destacamos el código actualizado donde importamos los módulos que necesitamos, inyectamos el módulo http en el constructor, configuramos una URL de API para enviar la solicitud y definimos los métodos getGames () y handleError ().


Configurar la API del lado del servidor

Para esta demostración, enviamos la solicitud HTTP a http://lpg.io/api/angulargames, que es un servidor que se ejecuta en una máquina virtual. Este servidor utiliza Laravel, un popular framework PHP que es muy capaz de proporcionar funciones de servicio web JSON API dedicadas Aquí está el código que usamos en el lado del servidor usando Laravel.


api.php

Nota: También deberá agregar los siguientes fragmentos a publicindex.php para habilitar la funcionalidad CORS. Si no los incluye, puede encontrar errores como el código devuelto por el servidor: 0, el mensaje de error es: Respuesta de falla de Http para (URL desconocida): 0 Error desconocido o tal vez algo como Acceso a XMLHttpRequest en 'http: // lpg. io / api / angulargames 'from origin' http: // localhost: 4200 'ha sido bloqueado por la política CORS: No hay un encabezado' Access-Control-Allow-Origin 'presente en el recurso solicitado.


Actualizar componente de lista de juegos

Con todo ahora en su lugar, podemos actualizar el archivo game-list.component.ts . Específicamente, escribiremos un nuevo código para el ngOnInit()gancho del ciclo de vida para que ahora haga uso de Observables para realizar una solicitud http get a nuestra api usando nuestro servicio de juego actualizado.

¡Nuestro nuevo servicio de juegos que utiliza Observables para realizar una solicitud http a un servidor back-end de Laravel ya está funcionando!
solicitud http angular a través de un ejemplo observable

También puede ver los datos de respuesta de la API en la sección de la consola de las herramientas para desarrolladores de Chrome.
inspeccionando datos de respuesta de api angular en la consola


Cómo hacer solicitudes HTTP en Angular usando Observables Resumen

Aquí hay algunos puntos clave para recordar cuando se trata de Observables y Solicitudes HTTP en Angular.

Configurando HTTP en Angular

  • Agregue HttpClientModule a la matriz de importaciones de una de las aplicaciones Módulos angulares
  • Importar lo que se necesita para el servicio de datos
  • Defina una dependencia para el servicio de cliente http usando el constructor
  • Cree un método para cada tipo de solicitud http que le gustaría usar
  • Llame a los métodos http según sea necesario (por ejemplo, GET)
  • Utilice genéricos para especificar el tipo de devolución

Suscripción a Observables

  • Llame al método de suscripción del observable devuelto
  • Crea una función para manejar elementos emitidos
  • Asignar datos de propiedad al objeto JSON devuelto
  • Crea una función para manejar errores



Publicar un comentario

0 Comentarios