Domina la Programación Asíncrona
¡Hola HaWker! Jeff Bruchado por aquí.
Este es un artículo más de nuestra serie de artículos que va a cubrir nuestro viaje para Aprender Programación desde Cero.
Bueno, sin más preámbulos, ¡vamos a comenzar!
Hoy, vamos a hablar sobre la Programación Asíncrona en JavaScript:
Vamos a pensar en un escenario:
Estás creando una aplicación y en ella hay una parte que necesita buscar información del tiempo, como previsión del tiempo, temperatura y diferentes tipos de datos, directamente de una API (una fuente externa de datos).
Ahí me preguntas: "¿Y qué? ¿Cuál es la diferencia?"
La diferencia, mi Querido, es que esas informaciones no llegan al momento, como un pedido en el drive-thru.
Pueden demorar un poco, porque dependen de una conexión con internet, del servidor de la API... y algunas otras cosas.
La Programación Asíncrona entra en escena para lidiar con esas esperas, sin dejar tu app parada, esperando que llegue la respuesta.
Es como pedir una pizza y poder ver tu serie favorita mientras esperas la entrega, ¿entiendes?
¿Por qué eso es importante?
Con esto, el programa no se traba: Sin asincronía, tu app quedaría congelada, esperando la respuesta de la API. Con ella, la app continúa corriendo suave mientras espera.
Mejora la experiencia del usuario: A nadie le gusta una app que se traba o demora en responder. La Programación Asíncrona mantiene las cosas fluyendo.
Eficiencia: Puedes hacer varias cosas al mismo tiempo. Mientras una información está siendo buscada, otras partes de tu app pueden continuar funcionando.
En JavaScript, la magia acontece con herramientas como Promises y Async/Await.
Son como contratos de que algo va a suceder, pero no en el momento presente.
Por ejemplo:
fetch('url-de-la-api-de-tiempo')
.then(respuesta => respuesta.json())
.then(datos => console.log(datos))
.catch(error => console.log(error));En ese código, la función fetch busca los datos, y mientras tanto, el resto de tu app no queda parada esperando. Cuando los datos llegan, el .then() es ejecutado.
Entonces es eso: Programación Asíncrona es fundamental porque mantiene tu app ágil, eficiente y mucho más agradable de usar.
Sin ella, sería como quedarse en una fila enorme esperando por algo que podría ser hecho mientras haces otras cosas.
¿Quién quiere eso, verdad?
Entendiendo la Programación Asíncrona
La Programación Asíncrona es una técnica de programación que permite que el código se ejecute de forma no-bloqueante.
Esto significa que mientras una tarea es realizada, el código puede continuar siendo ejecutado sin esperar por la conclusión de la tarea.
Esto es útil cuando la tarea puede demorar mucho tiempo para ser concluida, como realizar una llamada de API.
En JavaScript, la programación asíncrona es generalmente implementada con callbacks o promises.
Callbacks
Son funciones que son pasadas como argumentos a otras funciones y son llamadas cuando la operación asíncrona es concluida.
Por ejemplo:
function getData(callback) {
// hace una solicitud y obtiene los datos
let data = 'algún dato';
callback(data);
}
getData(function (data) {
console.log(data); // algún dato
});Los callbacks son una pieza clave en el rompecabezas de la Programación Asíncrona, y entender cómo funcionan te salvará de muchos dolores de cabeza.
Entonces, ¿qué son esos tales Callbacks?
Imagina que estás organizando una fiesta y le pides a tu pareja que traiga las bebidas. Le dices: "Llámame cuando llegues, que bajo para ayudarte a subir con todo".
Ese "llámame cuando llegues" es básicamente un callback en la vida real.
En el mundo de la programación, un callback es una función que es pasada como argumento a otra función y es ejecutada después de que una tarea es concluida.
¿Por qué son importantes?
Control de flujo asíncrono: En JavaScript, muchas veces, estás lidiando con operaciones que llevan un tiempo para suceder, como buscar datos de una API. Callbacks te ayudan a decir: "Oye, después de que termines esto aquí, haz esto aquí".
Continuación del código: Permiten que continúes con otras operaciones mientras esperas que algo sea concluido. Con eso, tu programa no queda trabado esperando.
Manipulación de resultados: Cuando recibes el resultado de una operación asíncrona, el callback lidia con ese resultado. O sea, puedes procesar y usar esos datos.
Por ejemplo:
function buscarDatos(url, callback) {
fetch(url)
.then(respuesta => respuesta.json())
.then(datos => callback(null, datos))
.catch(error => callback(error, null));
}
buscarDatos('url-de-la-api', function (error, datos) {
if (error) {
console.log('Oops, hubo error:', error);
} else {
console.log('Aquí están los datos:', datos);
}
});En ese código, buscarDatos es una función que busca datos de una API. Cuando la búsqueda es concluida (sea con éxito o error), el callback es llamado con los resultados.
Pero cuidado: Callbacks pueden llevar al temido "Callback Hell" o "Pyramid of Doom", que es cuando tienes un montón de callbacks anidados y tu código se vuelve un laberinto.
Por eso, es importante usar con sabiduría y considerar alternativas como Promises y Async/Await para mantener el código limpio y legible.
Entonces es eso, callbacks son como los mensajeros del mundo asíncrono, llevando información de un punto a otro y garantizando que las cosas sucedan en el orden correcto. ¡Genial verdad!
Promises
Las Promises son un recurso más moderno para lidiar con la programación asíncrona.
Son objetos que representan la eventual conclusión o falla de una operación asíncrona.
En lugar de pasar una función callback como argumento, puedes usar el método then de la Promise para especificar qué debe ser hecho cuando la Promise es resuelta o rechazada.
Por ejemplo:
function getData() {
return new Promise(function (resolve, reject) {
// hace una solicitud y obtiene los datos
let data = 'algún dato';
resolve(data);
});
}
getData()
.then(function (data) {
console.log(data); // algún dato
})
.catch(function (error) {
console.error(error);
});El operador async y la palabra clave await son una forma aún más conveniente de lidiar con la programación asíncrona.
Permiten que escribas código que parece síncrono, pero que es realmente asíncrono.
Por ejemplo:
async function getData() {
// hace una solicitud y obtiene los datos
let data = await someAsyncFunction();
console.log(data);
}
getData();Callback Hell
El Callback Hell, como mencioné anteriormente, es un término usado para referirse al código que consiste en muchas capas de funciones de callback anidadas, lo que puede ser difícil de leer y mantener.
Esto es común cuando se usan callbacks para lidiar con la programación asíncrona y puede ser evitado usando técnicas como Promises y async/await.
Aquí está un ejemplo de cómo el código puede quedar complicado con el uso excesivo de callbacks:
getUserData(function (user) {
getComments(user.id, function (comments) {
getLikes(user.id, function (likes) {
getFollowers(user.id, function (followers) {
console.log(
`${user.name} tiene ${comments.length} comentarios, ${likes.length} likes y ${followers.length} seguidores.`
);
});
});
});
});Usando Promises, ese mismo código puede ser escrito de la siguiente manera:
getUserData()
.then(function (user) {
return getComments(user.id);
})
.then(function (comments) {
return getLikes(user.id);
})
.then(function (likes) {
return getFollowers(user.id);
})
.then(function (followers) {
console.log(
`${user.name} tiene ${comments.length} comentarios, ${likes.length} likes y ${followers.length} seguidores.`
);
})
.catch(function (error) {
console.error(error);
});Y usando async/await, el código puede ser escrito de la siguiente manera:
async function getStats() {
try {
let user = await getUserData();
let comments = await getComments(user.id);
let likes = await getLikes(user.id);
let followers = await getFollowers(user.id);
console.log(
`${user.name} tiene ${comments.length} comentarios, ${likes.length} likes y ${followers.length} seguidores.`
);
} catch (error) {
console.error(error);
}
}
getStats();Como puedes ver, usando Promises o async/await, el código queda más legible y fácil de mantener que usando múltiples callbacks anidados.
Conclusión
En resumen, la programación asíncrona es una técnica que permite que el código continúe siendo ejecutado mientras aguarda el retorno de una llamada de función asíncrona.
Esto es útil cuando la operación puede demorar un largo tiempo para ser concluida, como cuando hacemos una solicitud a una API.
En JavaScript, existen varias maneras de lidiar con la programación asíncrona, como callbacks, Promises y async/await.
Cada una de esas abordajes tiene sus propias ventajas y desventajas y es importante entender cuándo usar cada una de ellas.
Yo particularmente uso la siguiente regla para definir si uso Promises o async/await:
Cuando una request posee datos que dependen de datos de otra solicitud, el async/await es lo más recomendado, pues de esa forma garantizas que la segunda solicitud solo será ejecutada, cuando hayas recibido la respuesta de la primera.
Pero como puedes percibir, eso hace que tu programa quede lento. Por tener que esperar la primera solicitud para solo entonces ejecutar la próxima.
Sin embargo, cuando vas a ejecutar dos solicitudes en secuencia, y una solicitud no depende de la respuesta de la otra, entonces en ese caso es más recomendado usar las Promises, porque de esa forma consigues ejecutar las dos solicitudes al mismo tiempo, dejando tu código mucho más rápido.
Además de eso, es importante tener cuidado con el "Callback Hell", o el anidamiento excesivo de callbacks, para mantener el código legible y fácil de mantener.
Pues bien HaWker, llegamos al fin de un artículo más.
Como siempre, si tienes cualquier duda o quieres explorar más algún punto, simplemente responde con tu duda, en este email.
¡Y recuerda, estoy aquí para ayudarte a mejorar 1% con cada nuevo artículo!
Si llegaste hasta aquí, como de costumbre, por favor, responde este email con "Conseguí entender la Programación Asíncrona en JavaScript".
De esta forma voy a saber que esta serie de artículos está siendo útil para ti, y que estás acompañando y aprovechando.
¡Como ya sabes! Solamente un verdadero HaWker llega hasta el final.
¡Felicitaciones!
Estoy feliz de tenerte aquí.
Te veo pronto.
¡Vamos a por ello! 🦅
- Jeff Bruchado
Cuando sientas que es el momento existen 2 maneras en que puedo ayudarte:
01) Aprendiendo JavaScript desde Cero: Conviértete en un programador de valor y aprende a programar usando JavaScript, con un contenido organizado y condensado pensado en lo que realmente importa que aprendas. El contenido posee todos los artículos que vengo poniendo a disposición semanalmente para ti, y también posee ejercicios prácticos, con las respuestas para que aprendas la teoría y ya salgas poniendo manos a la obra.
02) Consultoría: Forma parte de mi mentoría y ten clases directamente conmigo. Si te interesa, responde este email con "Tengo interés en la mentoría."
¡Felicitaciones por llegar hasta aquí, HaWker! 🎉
En este momento que aprendiste sobre la programación asíncrona en JavaScript, ¿qué tal testear tus conocimientos? Participa del quiz abajo y ve cuánto absorbiste de nuestro artículo.
Es una excelente manera de fijar el aprendizaje y prepararte para los próximos pasos en tu viaje de programación.
Presiona para acceder al quiz.
¡Buena suerte y diviértete!