Asincronía en JavaScript

Cuando desarrollamos aplicaciones web, nuestro código Front-End se ejecuta bajo un único Thread(ThreadUI) y las requests que tengamos que hacer a servidor a menudo tienen unos tiempos de respuesta que podrían bloquear el Thread, inhabilitando así la aplicación durante el proceso y por ende mostrando al usuario final un comportamiento anómalo.

La única forma de liberar ese Thread principal es creando código asíncrono para nuestras llamadas y hasta el momento nos hemos servido de diferentes actores para desempeñar este papel tales como callbacks o bien de forma más óptima encapsulando las respuestas en objetos Promise.
A continuación mencionaré las tres maneras principales de manejar nuestro código de forma asíncrona, mostrando algún ejemplo y haciendo una breve descripción de cada una de ellas.

Callback pattern

Este patrón es la forma más básica de gestionar las respuestas de un código asíncrono.
Una callback sin ir más lejos es una respuesta a una llamada o una computación. Se trata de una función pasada por parámetro que se disparará a través de la función que la contiene cuando esta acabe la ejecución de su operación asíncrona.

Ejemplo recolector de gemas:

foto 1

En Jquery también hacemos callbacks. Este es el típico caso de la animación del toggle con el timeout. Al acabar el efecto tras 3 segundos se ejecutará la function callback, en este caso la callback desencadena un alert.

foto2

No obstante, con el uso de callbacks y un código que precise la concatenación de múltiples callbacks anidadas, nos podemos encontrar con el llamado “Callback Hell” o “Pyramid of Doom” o incluso si nos ponemos navideños “Christmas tree from hell”.

Aquí tenemos un ejemplo de anidación de callbacks aceptable

foto 3

Pero nunca deberíamos llegar a esto…

foto 4

Evidentemente este ejemplo es muy esquemático pero buscando ejemplos por internet nos podemos encontrar con horrores peores, anidaciones abismales con una escalabilidad y mantenibilidad dignas de pesadilla.

Promises poniendo orden…

Las Promises vienen, para mitigar parte de los dolores que nos pueden crear frenéticos flujos de callbacks anidados en una estructura más robusta y legible para manejar nuestras callbacks. Además cumple con un concepto similar a la de una máquina de estados, es decir, está preparada para responder a un eventual valor en el futuro, bajo una relación de estados cuya representación con los datos entrantes es superflua. En definitiva una Promise es un objeto que sirve para encapsultar una eventual “tarea”.

Sus estados son:

– Pending(pendente) estado inicial, no cumplida o rechazada.

– Fulfilled(cumplida)

– Rejected(rechazada)

Las Promises solo pueden cambiar de estado pendiente a alguno de los dos restantes, pero si podemos encolar callbacks con el método “.then” de la Promise y podemos capturar excepciones con el método “.catch”. Actualmente las Promises son nativas en EcmaScript 6 con lo cual podemos hacer un “new” de objetos Promise cuando lo necesitemos.

Ejemplo de Promise con uso de then, catch y la posibilidad de callbackHell neutralizada.

foto 5

Async / Await

A menudo desempeñar código asíncrono puede ser una labor algo pesada dependiendo de la complejidad de nuestras llamadas por lo que nuestros amigos de EcmaScript nos tienen preparada una buena noticia para un futuro no muy lejano.

Seguramente cuando hablamos de async/await nos viene a la memoria un post que escribí hace tiempo sobre la asincronía en Asp.Net y las bondades del framework en cuanto a la gestión de los Threads, pues bien, resulta que el comité TC39 que lleva la estandarización de EcmaScript incluyen en la versión EC2016/ EcmaScript 7 las funciones async tal y como las escribimos en C# pero en el mundo monothread de Javascript.

Se trata de un “Sintactic sugar” que nos permite “awaitar” Promises como “awaitamos” objetos Task en .Net.
foto 6Pese a que no disponemos de la versión de ES7 disponible aún para su uso, podemos utilizar Async/await gracias al uso de transpilers como Babel.

foto moret

Eduard Moret es técnico superior en desarrollo de aplicaciones informáticas y actualmente especializado en tecnología .Net. Amante de la computación gráfica y la programación, Eduard se incorporó a Sogeti en 2015. Actualmente desempeña su labor en la empresa como programador Junior.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s