Manejando el asincronismo
Contenido del curso
Manejando el asincronismo
Contenido del curso
Las promesas son una característica importante de JavaScript para manejar operaciones asíncronas y controlar su flujo. Pero, ¿cómo se manejan las promesas en el código de forma eficiente y efectiva? Vamos a discutir dos formas populares de manejar promesas: mediante callbacks y mediante async/await.
Callback
Los callbacks son funciones que se pasan como argumentos a otra función y se llaman en algún momento después de que se complete la operación asíncrona. Un callback es una forma de manejar la respuesta de una promesa.
Veamos un ejemplo:
function getUserData(userId, callback) { fetch(`https://jsonplaceholder.typicode.com/users/${userId}`) .then(response => response.json()) .then(data => callback(data)) .catch(error => console.log(error)) } function displayUserData(data) { console.log(data.name); } getUserData(1, displayUserData);
En este ejemplo, se define una función getUserData que toma un ID de usuario y un callback como parámetros. Dentro de esta función, se llama a la API de jsonplaceholder y se obtiene el objeto de datos del usuario. Luego, se llama al callback con los datos del usuario como argumento. En este caso, el callback es la función displayUserData que simplemente muestra el nombre del usuario en la consola.
La desventaja de usar callbacks es que puedes crear un Callback Hell, que es un anti-patrón producido por anidar múltiples callbacks dentro de otros callbacks en un código asíncrono. Esto puede ocurrir cuando un código asíncrono necesita realizar múltiples operaciones de manera secuencial, donde la ejecución de una operación depende de los resultados de la operación anterior. Este anti-patrón puede hacer que el código sea difícil de entender, mantener y depurar.
Un ejemplo del Callback Hell puede ser el siguiente, donde se realiza una serie de operaciones asíncronas anidadas que dependen de los resultados de la operación anterior:
operation1(function(result1) { operation2(result1, function(result2) { operation3(result2, function(result3) { operation4(result3, function(result4) { // ...continuar con más operaciones }); }); }); });
En este ejemplo, la ejecución de operation2 depende del resultado de operation1, y la ejecución de operation3 depende del resultado de operation2, y así sucesivamente. Como se puede ver, el código se vuelve cada vez más anidado y difícil de leer a medida que se agregan más operaciones.
Promesas
Una forma de evitar el Callback Hell es utilizar Promesas o Async/Await, que proporcionan una forma más estructurada y fácil de leer para manejar código asíncrono. Por ejemplo, el código anterior se puede reescribir utilizando Promesas de la siguiente manera:
operation1() .then(result1 => { return operation2(result1); }) .then(result2 => { return operation3(result2); }) .then(result3 => { return operation4(result3); }) .then(result4 => { // ...continuar con más operaciones }) .catch(error => { // Manejar errores });
En este ejemplo, cada operación devuelve una Promesa que se encadena usando el método then(). Esto hace que el código sea más legible y fácil de seguir en comparación con la versión anterior.
Async/await
Async/await es una forma más moderna y legible de manejar promesas. En lugar de usar callbacks anidados, async/await permite que el código parezca más secuencial y fácil de leer.
Veamos un ejemplo:
async function getUserData(userId) { try { const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`); const data = await response.json(); return data; } catch (error) { console.log(error); } } async function displayUserData(userId) { const data = await getUserData(userId); console.log(data.name); } displayUserData(1);
En este ejemplo, se define una función getUserData que hace la misma llamada a la API que en el ejemplo anterior, pero esta vez usa await para esperar la respuesta y el try/catch para manejar los errores. La función displayUserData también utiliza await para esperar que se resuelva la promesa retornada por getUserData y luego muestra el nombre del usuario en la consola.
Conclusión
El uso de callbacks y async/await son formas efectivas de manejar promesas en JavaScript. Aunque ambos métodos tienen sus ventajas y desventajas, async/await se ha convertido en la opción preferida para muchas personas debido a su legibilidad y sintaxis más clara. Sin embargo, aún hay situaciones en las que los callbacks pueden ser la mejor opción, especialmente en situaciones donde se necesitan múltiples llamadas asincrónicas en secuencia.
Puedes profundizar en estos temas viendo el Curso de Asincronismo con JavaScript
Luis Castro
Tatiana Muñoz Muñoz
Carlos Andrade
Julian Roa Villamil
Joan Alexander Valerio Rodríguez
callback, promesas y async/await:
. Un callback es una función que se pasa como argumento a otra función y se invoca después de que se complete una tarea asíncrona. Por ejemplo, imagina que tienes una función que obtiene datos de un servidor y quieres imprimir los datos en la consola cuando se complete la solicitud.
function getData(callback) { // Hacer la solicitud al servidor // ... // Cuando se complete la solicitud: callback(data); } getData(function(data) { console.log(data); });
Las promesas son un método más nuevo para manejar el asincronismo en JavaScript. Una promesa representa un valor que puede estar disponible ahora, en el futuro o nunca. Las promesas tienen tres estados posibles: pendiente, resuelta y rechazada. Puedes encadenar promesas juntas para manejar múltiples tareas asincrónicas en secuencia.
function getData() { return new Promise((resolve, reject) => { // Hacer la solicitud al servidor // ... // Cuando se complete la solicitud: if (data) { resolve(data); } else { reject("No se pudo obtener los datos"); } }); } getData() .then((data) => { console.log(data); }) .catch((error) => { console.error(error); });
Finalmente, async/await es una forma más fácil y legible de manejar el asincronismo en JavaScript. Puedes usar la palabra clave async para declarar una función asíncrona y la palabra clave await para esperar a que se complete una tarea antes de continuar con la siguiente. Esto hace que el código sea más fácil de leer y entender.
async function imprimirDespuesDeUnSegundo() { await new Promise((resolve, reject) => { setTimeout(() => { resolve(); }, 1000); }); console.log("Hola"); // imprime "Hola" después de 1 segundo } imprimirDespuesDeUnSegundo();
Los cursos sugeridos y el reto, son un complemento perfecto para un excelente aprendizaje de este lenguaje, siento que estoy aprendiendo un montón y lo mejor de manera agradable y sin tanto dolor, (aunque cabe resaltar que me dan duro los playground) . Gracias Luis por todos tus aportes cada clase los leo y gracias Platzi por este tipo de retos y ojala que vengan más retos como este 😁😁😁😁😁😁😊
36/89 Manejando el asincronismo Las promesas en JavaScript para manejar operaciones asíncronas y controlar su flujo a través de callbacks y async/await.
Callbacks
Los callbacks son una forma de manejar la respuesta de una promesa en JavaScript. Se utilizan como argumentos de una función y se llaman en un algún momento después de que se complete la operación asíncrona. Sin embargo, anidar mútiple callbacks puede crear un Callback Hell, lo que dificulta la comprensión, el mantenimiento y la depuración del código.
operation1(function(result1) { operation2(result1, function(result2) { operation3(result2, function(result3) { operation4(result3, function(result4) { // ...continuar con más operaciones }); }); }); });
En este ejemplo se muestra cómo se utiliza un callback para mostrar los datos del usuario obtenidos de una API. La función getUserData toma un ID de usuario y una función de callback, y llama al callback con los datos del usuario como argumento una vez que se obtiene de la API. La función displayUserData es el callback que simplemente muestra el nombre del usuario en la consola.
Es importante tener en cuenta que, aunque los callbacks son una forma útil de manejar promesas en JavaScript, su uso excesivo puede hacer que el código sea dificil de leer y mantener. Por lo tanto, existen otras alternativas como async/await que se discuten en el texto original.
Promesas
Una forma de evitar el Callback Hell es utilizando Promesas o Async/Await en lugar de callbacks. Las promesas proporcionan una forma más estructurada y fácil de leer para manejar código asíncrono.
operation1() .then(result1 => { return operation2(result1); }) .then(result2 => { return operation3(result2); }) .then(result3 => { return operation4(result3); }) .then(result4 => { // ...continuar con más operaciones }) .catch(error => { // Manejar errores });
En el ejemplo proporcionado, se muestra cómo se puede reescribir el código anterior utilizando promesas. Cada operación devuelve una promesa que se encadena usando el método then(), lo que hcae que el código sea más legible y fácil de seguir en comparación con la versión anterior que usaba callbacks.
Async/Await
Es una técnica moderna para manejar promesas en JavaScript que hace que el código sea más fácil de leer y seguir en comparación con callbacks y promesas. En lugar de anidar varias funciones dentro de otras, el código utiliza palabras clave como async y await para indicar qué opereaciones son asíncronas y esperar hasta que se resuelvan
En el ejemplo proporcionado, la función getUserData usa la API fetch para obtener los datos del usuario y devuelve los datos como resultado. La función displayUserData llama getUserData y espera a que se resuelva la promesa antes de mostrar el nombre del usuario en la consola. La palabra clave try/catch es utilizada para manejar cualquier error que se produzca durante la ejecución de las funciones async/await
async function getUserData(userId) { try { const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`); const data = await response.json(); return data; } catch (error) { console.log(error); } } async function displayUserData(userId) { const data = await getUserData(userId); console.log(data.name); } displayUserData(1);
La función async/await getUserData se puede usar para buscar y devolver los detalles del usuario de una base de daatos remota. La función se puede llamar en otra función async/await para mostrar los detalles del usuario en una interfaz de usuario en línea.
Hola, una pregunta, estuve modificando un poco el código para entenderlo y me encontré con algo interesante pero que no entiendo porque pasa, el código en cuestión es el siguiente:
function getUserData(userId, callback) { fetch(`https://jsonplaceholder.typicode.com/users/${userId}`) .then(response => response.json()) .then(data => callback(data)) .catch(error => console.log(error)) } function displayUserData(data) { console.log(data.name); } function displayUserNameData(data) { console.log(data.username); } getUserData(1, displayUserData); getUserData(1, displayUserNameData);
Básicamente cree otra función llamada displayUserNameData que a diferencia de displayUserData, me imprime el username y tal cual les pase el código lo lógico que pensé es que me imprimiera primero el nombre y luego el username, pero no, de hecho no importa el orden que los coloque me imprime siempre primero el username:
El ejemplo de Async/Await me pareció muy claro para entender la lógica de ejecución. 10/10 🤓
