Comprender, crear y suscribirse a observables en Angular

Cuando salió la versión 2 de Angular, nos presentó a los observables. El Observable no es una característica específica angular, sino un nuevo estándar para administrar datos asincrónicos que se incluirá en la versión ES7. Angular utiliza ampliamente observables en el sistema de eventos y el servicio HTTP. Entender los observables puede ser una gran cosa, por lo tanto, estoy aquí para explicarlo de la manera más fácil.

Foto de Tommy Lisbin en Unsplash

Observables

Los observables son colecciones perezosas de múltiples valores a lo largo del tiempo.

sí, claro ... bueno, en realidad es bastante fácil:

  1. Los observables son vagos
    Se podría pensar en observables perezosos como boletines. Para cada suscriptor se crea un nuevo boletín. Entonces solo se envían a esas personas, y no a nadie más.
  2. Los observables pueden tener múltiples valores a lo largo del tiempo
    Ahora, si mantiene abierta esa suscripción al boletín, recibirá una nueva de vez en cuando. El remitente decide cuándo lo recibe, pero todo lo que tiene que hacer es esperar hasta que llegue directamente a su bandeja de entrada.

Si vienes del mundo de las promesas, esta es una diferencia clave, ya que las promesas siempre devuelven un solo valor. Otra cosa es que los observables son cancelables. Si ya no desea su boletín informativo, cancele su suscripción. Con las promesas esto es diferente, no puede cancelar una promesa. Si se le entrega la promesa, el proceso que producirá la resolución de esa promesa ya está en marcha y, por lo general, no tiene acceso para evitar que se ejecute la resolución de esa promesa.

Empujar vs tirar

Una cosa clave para entender cuando se usan observables es que los observables empujan. Push and pull son dos formas diferentes que describen cómo un productor de datos se comunica con el consumidor de datos.

Halar
Al extraer, el consumidor de datos decide cuándo obtiene los datos del productor de datos. El productor no sabe cuándo se entregarán los datos al consumidor.

Cada función de JavaScript utiliza el pull. La función es un Productor de datos, y el código que llama a la función la consume al "extraer" un único valor de retorno de su llamada.

empujar
Al empujar, funciona al revés. El productor de datos (el creador del boletín informativo) decide cuándo el consumidor (el suscriptor del boletín informativo) obtiene los datos.

Las promesas son la forma más común de impulsar JavaScript en la actualidad. Una promesa (el productor) entrega un valor resuelto a las devoluciones de llamada registradas (los consumidores), pero a diferencia de las funciones, es la promesa la que se encarga de determinar con precisión cuándo ese valor se "transfiere" a las devoluciones de llamada.

Los observables son una nueva forma de enviar datos en JavaScript. Un observable es un Productor de múltiples valores, "empujándolos" a los suscriptores.

Observables en Angular

Si comienza a usar Angular, probablemente encontrará observables al configurar sus solicitudes HTTP. Así que empecemos por ahí.

Ahora hemos creado un HttpClient simple con un método fetchUsers que devuelve un observable. Probablemente nos gustaría mostrar a los usuarios en algún tipo de lista, así que hagamos algo con este método. Como este método devuelve un observable, debemos suscribirnos a él. En Angular podemos suscribirnos a un observable de dos maneras:

Manera 1:
Nos suscribimos a un observable en nuestra plantilla utilizando la tubería asíncrona. El beneficio de esto es que Angular trata con su suscripción durante el ciclo de vida de un componente. Angular se suscribirá y cancelará automáticamente la suscripción. No olvides importar el "CommonModule" en tu módulo, ya que la tubería asíncrona quedará expuesta a eso.

Tenga en cuenta el signo de dólar. El uso del signo de dólar en el nombre de una variable que es observable se considera la mejor práctica. De esta manera, es fácil identificar si su variable es observable o no.

Manera 2:
Nos suscribimos a lo observable nosotros mismos usando el método real subscribe (). Esto puede ser útil si primero desea hacer algo con los datos antes de mostrarlos. La desventaja es que debe administrar la suscripción usted mismo.

Como puede ver, la lógica de la plantilla es bastante similar, la lógica del componente en realidad puede ser muy diferente y más compleja si elige la forma 2. En general, recomendaría elegir la manera 1. Como es la más fácil y usted no tiene que administrar manualmente sus suscripciones. Mantener sus suscripciones abiertas mientras no las usa es una pérdida de memoria y, por lo tanto, no es bueno.

Creando un observable usted mismo

Ahora que sabe cómo lidiar con los observables comunes que Angular le brinda, es bueno saber cómo crear un observable usted mismo. La versión más simple se ve así:

Como puede ver en el ejemplo, los observables se crean utilizando la nueva llamada Observable (), luego se suscribe por un observador, se ejecuta llamando a next () y se elimina llamando a unsubscribe ().

Creando observables
Crear observables es fácil, simplemente llame al nuevo Observable () y pase un argumento que represente al observador. Por lo tanto, generalmente también lo llamo "observador".

Suscribirse a observables
Recuerde, los observables son vagos. Si no se suscribe, nada va a suceder. Es bueno saber que cuando se suscribe a un observador, cada llamada de subscribe () activará su propia ejecución independiente para ese observador dado. Las llamadas de suscripción no se comparten entre varios suscriptores al mismo observable.

Ejecutando observables
El código dentro de un observables representa la ejecución de los observables. En el parámetro que se proporcionó al crear el observable, hay tres funciones disponibles para enviar datos a los suscriptores del observable:

  • "Siguiente": envía cualquier valor, como números, matrices u objetos a sus suscriptores.
  • "Error": envía un error de Javascript o una excepción
  • "Completo": no envía ningún valor.

Las llamadas de la próxima son las más comunes, ya que realmente entregan los datos a sus suscriptores. Durante la ejecución observable puede haber infinitas llamadas al observer.next (), sin embargo, cuando se llama a observer.error () u observer.complete (), la ejecución se detiene y no se entregarán más datos a los suscriptores.

Desechando observables
Debido a que la ejecución observable puede ejecutarse durante una cantidad de tiempo infinita, necesitamos una forma de evitar que se ejecute. Dado que cada ejecución se ejecuta para cada suscriptor, es importante no mantener las suscripciones abiertas para los suscriptores que ya no necesitan datos, ya que eso significaría un desperdicio de memoria y poder de cómputo.

Cuando se suscribe a un observable, obtiene una suscripción, que representa la ejecución en curso. Simplemente llame a unsubscribe () para cancelar la ejecución.

Conclusión

Esta publicación debería darle una mejor comprensión de cómo funcionan realmente los observables. Para obtener aún más de los observables, el siguiente paso es comprender el poder de Rxjs y todas las funciones auxiliares que proporcionan. Rxjs solo podría cubrir múltiples publicaciones sobre las que escribiré más adelante. Si quieres ir un paso más allá. Mira mi publicación sobre temas de rxjs: https://hackernoon.com/understanding-rxjs-subjects-339428a1815b

¿Te consideras uno de los mejores?

Trabajo para Founda como desarrollador front-end senior y estamos buscando desarrolladores senior especializados en Vue y / o Node.

Founda está creando el futuro de la TI sanitaria. Somos fundados por emprendedores tecnológicos experimentados en enero de 2019, Founda es una empresa joven y bien financiada en el área de tecnología de salud y bajo código / sin código en Amsterdam.

Hemos estado construyendo una compañía de tecnología usando una pila moderna con un pequeño equipo de desarrolladores autodeterminados. Estamos buscando hacer crecer la empresa con personas de alta calidad.

Si cree que tiene lo necesario para construir el futuro de Healthcare y es residente europeo. Mándame una línea a hello@founda.com.