En JavaScript la forma nativa de usar funciones asíncronas es con callbacks. Sin embargo, el uso de callbacks puede llevar a un código difícil de mantener y entender, especialmente cuando se trata de múltiples operaciones asíncronas anidadas. A este problema se le conoce como "callback hell". Para resolver este problema, JavaScript introdujo las promesas, que permiten manejar operaciones asíncronas de una manera más limpia y estructurada. Sin embargo, las promesas tienen limitaciones, como la incapacidad de manejar múltiples valores a lo largo del tiempo, el que no son perezosas, la falta de cancelación de operaciones o la dificultar de reintentar una operación.
RxJS (Reactive Extensions for JavaScript) es una biblioteca que permite trabajar con programación reactiva usando Observables. Los observables son una forma de manejar flujos de datos asíncronos y permiten emitir múltiples valores a lo largo del tiempo, lo que los hace ideales para manejar eventos, peticiones HTTP, y otros flujos de datos.
Actualmente Angular utiliza RxJS para manejar la mayoría de las operaciones asíncronas, como peticiones HTTP, eventos del usuario, y más. Sin embargo, en las últimas versiones de Angular se está tratando de potenciar el uso de signals en detrimento de los observables.
El operador timer de RxJS permite crear un observable que emite un valor después de un período de tiempo específico y que se repita a intervalos regulares.
Vamos a capturar el evento keyup y mostrar las teclas pulsadas usando observables.
Para ello, creamos un componente key-logger que usa el operador fromEvent de RxJS para escuchar los eventos de teclado en un campo de entrada. Este operador crea un observable a partir de un evento del DOM, en este caso, el evento keyup.:
ng generate component key-loggerLos observables pueden emitir múltiples valores a lo largo del tiempo, y a menudo es necesario transformar esos valores antes de usarlos. RxJS proporciona una variedad de operadores para transformar los valores emitidos por un observable.
En el caso de nuestro componente key-logger, podemos usar operadores como map, filter y tap para transformar los eventos de teclado que estamos escuchando.
Un servicio en Angular puede necesitar ser usado como un observable para emitir valores a lo largo del tiempo. Por ejemplo, un servicio que recupera los productos podría emitir un nuevo valor cada vez que se recupere un nuevo producto o conjunto de productos.
Es importante desuscribirse de los observables cuando ya no son necesarios para evitar fugas de memoria. En Angular hay varias formas nativas de manejar la desuscripción además de las que nativamente posee RxJS.
En el ejemplo del servicio de productos, realmente no sería necesario ya que, al tratarse de un array, el observable se completará y la desuscripción ocurrirá automáticamente. AUnque también podría ocurrir que queramos desuscribirnos porque no queramos ya ver más productos o porque el componente que los muestra se destruye.
Vamos a manejar la desuscripción en el componente key-logger Para ello vamos a crear un checkboxque muestre u oculte elkey-logger`.