En este capítulo, hablaremos un poco de los observables en Javascript. Comenzemos desde lo más básico, declararemos una variable:
let miVariable = 23; Como quizá ya sabes, una variable contiene un único valor y ese valor puede ser usado inmediatamente después de su declaración. Las variables son muy sencillas. Por otro lado, tenemos los arreglos:
let miArray = [32, 'hola’, Nan] Este arreglo representa una colección de valores y al igual que nuestra pequeña variable, un arreglo también contiene datos al momento de su creación y están disponibles inmediatamente. La vida seria grandiosa si solo nos tuviéramos que preocupar por usar estos dos conceptos al momento de crear nuestras aplicaciones y tener los datos al instante. Pero, desafortunadamente hay ocasiones en que nuestras aplicaciones no tienen la información al instante cuando se requiere y es aquí cuando las cosas se comienzan a complicar.
Un ejemplo
Por ejemplo, imaginemos que tenemos una aplicación web y necesitamos hacer una petición AJAX para obtener los datos del usuario actual, el código se vería algo como esto:
let usuario= getUsuarioFromAPI();
doSomething(usuario); El problema que surge es que quizá la petición ha tardado mucho en responder y aún no ha arrojado los datos del usuario que estamos esperando, además de que la función sigue ejecutándose y esperando una respuesta del backend. Una posible solución es que podemos detener el proceso completo y no hacer nada hasta que la petición AJAX nos regrese los datos. Esto es inútil. Si lo comparamos con nuestra vida diaria, siempre sabemos que tenemos algo que hacer en el futuro mientras en el presente hacemos otras cosas. Por ejemplo, cuando vamos al supermecado y compramos nuestros productos, sabemos que tenemos una nota mental que dice que en un futuro (cercano o no) tendremos que llegar a casa y guardarlas mientras elegimos que marca de pan o salchichas comprar. Esto es lo que se conoce en Javascript como promesas (sabemos que una función tendrá algo que hacer en un momento como nosotros mientras compramos en el supermercado). Podríamos declarar una promesa como esto:
let usuarioRequest = getUsuarioFromAPI(); Como pasa con las variables, usuarioRequest contendrá un solo valor pero no inmediatamente. Una promesa representa los datos que se han solicitado, pero todavía no están disponibles y no sabemos cuando, pero sabemos que lo obtendremos (como el amor que sigues esperando de ella). Para hacer cualquier cosa con esos datos una vez que los obtenemos, necesitamos indicarle a la promesa que hacer usando el método .then en Javascript:
let usuarioRequest = getUserFromAPI();
usuarioRequest.then(userData => {
//Esta funcion se llamará una vez que se tengan los datos
processUser(userData);
} Actuando como una “nota mental”, una promesa permite que el proceso central continúe haciendo cosas en otro lugar, mientras que el backend recorre varios índices de bases de datos en busca de nuestro usuario. Una vez que regresa la solicitud, nuestro proceso se asoma dentro de .then para ver qué hacer, ejecutando cualquier función que le hayamos indicado.
Para resumir:
| Síncrono (Sync) | Asíncrono (Async) | |
| Un único valor | Variables | Promesas |
| Una colección de valores | Arreglos (Arrays) | ? |
Los observables
Una vez que hemos hablado de las variables y los arreglos y para poder completar nuestra tabla de resumen, la pieza faltante es el observable. Los observables son como los arrays ya que representan una colección de eventos y a su vez, son como las promesas ya que también son asíncronos. Cada evento en la colección llega en algún momento determinado. Esto es lo que distingue a una colección de las promesas, ya que el observable puede manejar varios eventos arbitrariamente y las promesas solo pueden manejar uno solo.
Para declarar un observable, imaginemos que queremos saber el número de clicks que se ha hecho sobre un botón en nuestra aplicación. Para ello, podemos declarar nuestro observable como:
Let miObs$ = clicksEnBoton(miBoton); Como podrás haberte dado cuenta, hay un signo extraño de dólar ($) al final de nuestra variable. Esta es parte de la convención dentro del mundo de RxJs e indica que la variable en cuestión es un observable.
Sabemos que estos clicks sucederán durante el tiempo de vida de nuestra aplicación y al igual que una promesa necesitamos “desenvolver” nuestro observable para acceder a los valores que contiene, existe un método que nos ayudará a desenvolver nuestro observable y se llama: .subscribe
El método .subscribe ejecutará la función pasada entre paréntesis cada vez que este nos emita un valor nuestro observable:
let miObs$ = clicksEnBoton(miBoton);
miObs$.subscribe(clickEvent => console.log('El botón fue presionado!')); Una cosa a tener en cuenta aquí es que los observables bajo RxJS son flojos. Esto significa que si no se llama a la suscripción de myObs$, no se crea el contador de clicks para saber si nuestro botón fue presionado. Los observables solo se ejecutan cuando saben que alguien está escuchando los datos que están emitiendo.
Hasta aquí esta primera parte sobre rxjs. ¡Recuerda suscribirte al canal de Youtube y pasarte por el blog!