Funciones Asíncronas con JS
Mucho del código que creamos en JS es ejecutado lineal tras lineal en un orden continuo/secuencial. A lo anterior podemos decir que se ejecuta de manera síncrona, una lineal de código se ejecuta hasta que termine la anterior.
Sin embargo en el mundo real muchas de las cosas que hacemos en la web no funcionan de esa manera, ya que muchas veces tenemos que esperar a que algo (un evento) suceda, ya sea, obtener informacion del servidor, esperar al usuario a que realice alguna acción o hacer un computo que tome mucho tiempo y que sea necesario para la siguiente parte del programa. El hecho de esperar para continuar con la siguiente operación lo llamaremos asíncrono.
JS al ser un lenguaje de programación funcional, es el lugar perfecto para este tipo de situaciones. A continuación veremos algunas de las funcionalidades que JS nos ofrece para poder manejar la asincronicidad en nuestro codigo.
Callbacks
En su forma mas simple la asincronicidad se logra a través de callbacks. Los callbacks son una función que das como parámetro a otra función. La función que recibe el callback lo llamara para que se ejecute cuando cierta condición/evento se cumpla. En inglés se podría traducir como “llama de vuelta” a la función que se da como parámetro.
Muchas veces este callback que mandamos como argumento a una función puede contener a su vez mas argumentos que nos puedan indicar sobre el estatus del condición/evento que se esta esperando. La forma mas fácil de entender esto es a través de ejemplos sencillos que te daré a continuación.
Timers y Events
La forma más simple de entender este concepto es a través de la función setTimeout() de JS, esta función nos ayudara a ejecutar otra función que nosotros le indiquemos despues de que haya pasado un lapso de tiempo que también le hayamos definido.
setTimeout recibe dos argumentos, la funcion callback que queremos ejecutar y el tiempo en milisegundos antes de ser ejecutada.
See the Pen Funciones Asíncronas 1 by Luis Ángel Perez Muñoz (@MimoPerez94) on CodePen.
Otra forma de entender la asincronisidad es a través de los eventos, la programación en JS es esencialmente conducida por eventos (event-driven), es decir, en vez de ejecutar algun programa predefinido la programación en JS usualmente espera a que el usuario haga algo y entonces se responde a esas acciones.
El navegador genera un evento cada vez que el usuario presiona una tecla, mueve el mouse, da click a algo, o cuando toca algo con los dedos en una pantalla touch. JS registra fuciones callback para todos estos tipos de eventos y el navegador web invoca esas funciones cada vez que esos eventos ocurren. Esas funciones callbacks son conocidas como manejadores de eventos (event handlers) o como escuchadores de eventos (event listeners) y los podemos registrar con la funcion addEventListener.
Eventos de red
Existe otra fuente muy comun de asincronisidad en JS y son las peticiones de red. Cuando queremos obtener información de una API por lo general usamos el metodo fetch para poder conseguir esa información. Entonces el navegador hace una peticion HTTP y asincronamente se maneja la respuesta del servidor cuando esta llega de nuevo al cliente.
Existe una desventaja con el manejo de los eventos con las funciones callbacks. Y es que a medida que encadenamos disintas funciones callbacks el nivel de legibilidad del codigo aumenta y es más difícil poder debuguearlo y darle manteniento. Hay Algo llamado el callback hell
Promesas
Las promesas son una implementación de un nivel superior a los callback que abstrae la complejidad de encadenar distintos eventos asincornos. Simplificando la legibilidad del codigo y haciendolo mucho más mantenible.
