Funciones asíncronas en JavaScript (con ejemplos)

Conoce más posibilidades en el lenguaje de programación

La asincronía es uno de los conceptos principales que forma parte del mundo de JavaScript. Así que si tienes interés en saber cómo funciona y de qué manera interviene en este lenguaje de programación, sigue leyendo que en este artículo te explico. 👇

¿Qué es la asincronía en JavaScript?

Cuando comenzamos a programar, normalmente realizamos tareas de forma síncrona, es decir, hacemos tareas de manera secuencial que se ejecutan una detrás de otra, de modo que el orden o flujo del programa se vuelve fácil de observar en el código. Tal y como en este ejemplo:

Sin embargo, en el mundo de la programación tarde o temprano se nos exigirá realizar operaciones asíncronas, especialmente en lenguajes como JavaScript. Y cuando esto ocurra deberemos realizar tareas donde necesitaremos esperar a que ocurra otro suceso (que no depende de nosotros) para poder ejecutar otra.

Esto pasa porque JavaScript es un lenguaje de programación no bloqueante, es decir, que las tareas que realizamos no quedan bloqueadas esperando ser finalizadas, sino que permiten continuar con el resto de ellas.

Ahora bien, para que comprendas mejor cómo funciona esta asincronía te pondré un ejemplo de la vida cotidiana. Imagina que vas a un restaurante de comida rápida, llegas y haces fila pensando en lo que vas a comprar; al estar frente a la caja ordenas y pagas, y después, te queda tiempo para realizar alguna otra acción (ir al baño, servirte una bebida o recoger los aderezos) mientras te preparan tus alimentos y esperas a que te los entreguen.

Pues bien, justo así se hace presente la asincronía en programación. Y en la siguiente imagen te muestro con más claridad cómo se ven los diferentes flujos de tareas, tanto síncronas como asíncronas:

¿Cómo son las funciones asíncronas en JavaScript?

En JavaScript existen varias formas de manejar la asincronía. Y a continuación te explicaré en qué consisten las más populares:

1.Callback

Una función Callback es aquella que pasa como argumento a otra función para que sea “llamada de nuevo” (Callback) en un momento posterior.

Y algo importante que también debes saber, es que la función que acepta a otras funciones como argumentos se llama orden-superior (High-Order) y es la que contiene la lógica para determinar cuándo debe ejecutarse la función Callback. Aquí un ejemplo:

Donde:

procesarEntradaUsuario() es la función de orden-superior que acepta un callback como argumento (función saludar()) y esta ejecuta su código dentro de la función de orden-superior.

Por otro lado, una de las desventajas de la función Callback es que si se cae en el denominado Callback hell (cuando existen varias funciones anidadas), el código se vuelve difícil de leer y mantener, y además, puede llegar a comportarse de manera extraña a causa de la asincronía.

2.Promise

Una promesa (Promise), como su nombre lo indica, es algo que al principio puedes pensar que se cumplirá pero en el futuro existe la posibilidad de que ocurran cosas distintas. Entre ellas:

• Se cumple (promesa resuelta).
• No se cumple (promesa se rechaza).
• Permanece en un estado incierto indefinidamente (promesa pendiente).

Y para que lo tengas más claro, te dejo este ejemplo de promesa en código:

Donde:

fetch() es una función que procesa un archivo txt.
then() ejecuta la función cuando la promesa se cumple.
catch() ejecuta la función cuando la promesa se rechaza.

Asimismo, debes tener presente que la promesa resuelve el problema de asincronía de manera mucho más elegante y práctica que la función Callback.

3.Async/Await

Se utiliza para gestionar las promesas de una forma más sencilla. Con Async/Await se siguen utilizando promesas pero se abandona el modelo de encadenamiento de .then() para utilizarlo de forma más tradicional.

Al principio se coloca la palabra clave Async, justo antes de function para definirla como una función asíncrona. Y en caso de utilizar arrow function, se escribe antes de los parámetros de la función, como en este ejemplo:

Luego está la palabra Await. Lo que hace es esperar a que se resuelva la promesa mientras permite continuar ejecutando otras tareas. Y se coloca justo antes de llamar a la función:

Esto logra que la forma de trabajar con Async/Await (aunque permite trabajar exactamente igual que con las promesas), sea mucho más fácil y trivial para usuarios que no estén tan acostumbrados a las promesas y a la asincronía en general, ya que el código parece síncrono.

Entonces.. ¿cuál debo utilizar?

Mi recomendación es que utilices Callback si no tienes otra opción o si únicamente manejarás una operación asíncrona, de esta forma el código será manejable y comprensible. Este no es malo, solo ten en cuenta que existen mejores alternativas para otros casos.

Uno de estos otros casos es cuando tienes múltiples operaciones asíncronas encadenadas, ya que rápidamente puedes incurrir en un Callback Hell si intentas utilizar un Callback. Bajo este contexto, las promesas son una gran herramienta que te ayudan a manejar las operaciones de una manera más estructurada y predecible.

De igual forma, Async/Await te da la oportunidad de manejar más fácil las cadenas de promesas, e incluso es mucho más comprensible y sencillo de usar.

En resumen aplica:

• Callback con el riesgo de entrar en un Callback Hell.
• Promesas para evitar el Callback Hell.
• Async/Await para escribir “código síncrono” con promesas.

Maneja las funciones según cada caso

Saber cómo funcionan cada una de las funciones y de qué manera manejarlas te brinda la posibilidad de utilizar todas las capacidades del lenguaje de JavaScript. Así que te invito a aplicar este conocimiento en tus proyectos según como mejor te convenga.

¿Quieres leer más temas relacionados? 👉Visita el blog de Nowports Tech👈