En este artículo, exploraremos el concepto de función asíncrona en JavaScript, específicamente enfocándonos en el uso de callbacks para crear bucles asíncronos. Para ello realizaremos un ejercicio sobre función asíncrona. Si bien esta técnica puede ser un poco compleja al principio, existen herramientas, como la librería “async”, que facilitan su implementación.
¿Qué es una función asíncrona y cómo se utilizan los callbacks?
Antes de iniciar nuestro ejercicio sobre función asíncrona, veamos a qué hace referencia este concepto.
En el sector IT, las operaciones asíncronas son muy comunes, ya que permiten que ciertas tareas se ejecuten en segundo plano mientras otras continúan. Cuando se necesita manejar tareas asíncronas en JavaScript, entran en juego las funciones asíncronas y los callbacks.
Una función asíncrona es aquella que no se ejecuta de manera secuencial, sino que se coloca en una pila de llamadas de eventos y se ejecuta cuando el event loop lo permite. Esto hace que el programa siga funcionando mientras se esperan resultados de operaciones asíncronas, como la lectura de bases de datos o la carga de recursos externos.
En JavaScript, las funciones asíncronas se definen con la palabra clave async antes de la palabra clave function. Al utilizar la palabra clave async, se indica que la función devolverá una promesa implícita, que puede resolverse o rechazarse en función del resultado de la operación asíncrona.
Dentro de una función asíncrona, podemos utilizar la palabra clave await antes de una operación asíncrona, como una llamada a una API, una consulta a una base de datos o una solicitud de red. El await pausará la ejecución de la función hasta que la operación asíncrona se complete y luego devolverá el resultado o manejará el error, lo que permitirá un flujo de control más claro y conciso.
Un callback es una función que se pasa como argumento a otra función y que se ejecutará más tarde, generalmente después de que ocurra alguna operación asíncrona. Los callbacks son una herramienta esencial para manejar la asincronía en JavaScript.
Un ejemplo anterior: función que se ejecuta tras dos segundos
Imagina que queremos crear una función llamada “Escribe tras dos segundos”, que reciba un texto y lo escriba en la consola después de esperar dos segundos. Podríamos implementarla utilizando la función setTimeout, que espera el tiempo especificado antes de ejecutar el código.
//Ejercicio sobre función asíncrona
function escribeTrasDosSegundos(texto) {
setTimeout(() => {
console.log(texto);
}, 2000);
}
Ejercicio sobre función asíncrona: bucle asíncrono con callbacks
Si queremos ejecutar dentro del ejercicio sobre función asíncrona la función “Escribe tras dos segundos” varias veces en serie, podríamos intentar hacerlo con un bucle, pero JavaScript no proporciona bucles asíncronos de forma nativa. Sin embargo, podemos crear nuestra propia solución utilizando callbacks y la recursividad.
//Ejercicio sobre función asíncrona
function bucleAsincronoEnSerie(n, fn, callback) {
if (n === 0) {
callback();
return;
}
fn(n, () => {
bucleAsincronoEnSerie(n - 1, fn, callback);
});
}
La función bucleAsincronoEnSerie en el ejercicio sobre función asíncrona toma tres argumentos:
nes el número de veces que se debe ejecutar la funciónfnen serie.fnes la función que queremos ejecutar.callbackes una función que se llamará al final del bucle.
Utilizar la librería async para bucles asíncronos
Si bien crear nuestras propias soluciones es valioso para entender los conceptos, a veces es más práctico utilizar librerías como async, que ofrecen funciones predefinidas para diferentes tipos de bucles asíncronos. La librería “async” proporciona una función timesSeries, que nos permite crear un bucle asíncrono en serie de manera más sencilla y realizar un ejercicio sobre función asíncrona.
//Ejercicio sobre función asíncrona
const async = require('async');
function escribeTrasDosSegundos(texto, callback) {
setTimeout(() => {
console.log(texto);
callback();
}, 2000);
}
const veces = 5;
async.timesSeries(veces, (n, next) => {
escribeTrasDosSegundos(`Texto ${n}`, next);
}, () => {
console.log('Fin');
});
Con async.timesSeries, simplemente especificamos la cantidad de veces que queremos ejecutar la función, la función que se ejecutará en cada iteración y una función final que se llamará cuando el bucle termine. De esta manera, podemos crear bucles asíncronos en serie de manera más eficiente y legible.
¡Sigue aprendiendo con KeepCoding!
Las funciones asíncronas y los callbacks son herramientas fundamentales para manejar tareas asíncronas en JavaScript. Aunque crear bucles asíncronos con callbacks puede ser un poco complejo, existen librerías como “async” que simplifican esta tarea. Ahora estás listo para enfrentarte a operaciones asíncronas en tus proyectos y aprovechar al máximo el potencial de JavaScript en el sector IT.
Si quieres seguir con tu proceso de aprendizaje, no dudes en contactarnos para unirte a nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás todo lo necesario para incursionar en un mercado laboral lleno de oportunidades. ¡Inscríbete ya y descubre cómo cambiar tu futuro!
