La asincronía en JavaScript es esencial para construir aplicaciones ágiles sin bloquear la ejecución. Aunque el lenguaje corre en un solo hilo (single thread), el event loop permite programar tareas como llamadas a API, timers y lecturas de archivos sin detener el flujo principal. Aquí verás cómo se comporta el código y cómo usar callbacks y promesas con then/catch para un manejo claro de resultados y errores.
¿Cómo funciona la asincronía en JavaScript con single thread y event loop?
La ejecución principal avanza línea a línea, pero ciertas operaciones se delegan y vuelven “más tarde”. Con setTimeout, por ejemplo, programas una tarea futura y el programa no espera: sigue. Por eso verás primero “inicio”, luego “fin” y finalmente el resultado del timeout cuando se cumpla el tiempo. Nada se bloquea; la tarea se agenda y se resuelve después en la pila de ejecución.
No bloqueo: la aplicación continúa mientras se espera el tiempo del timeout.
Orden real: logs sincrónicos primero; el timeout aparece cuando vence el tiempo.
Tiempos variables: 1 s, 3 s o lo que definas, sin frenar la app.
¿Qué muestra el ejemplo con setTimeout y console.log?
Salida esperada: primero “inicio”, luego “fin”, y después el “timeout”.
Si cambias a 3000 ms, sigue sin bloquear: “inicio”, “fin” y tras 3 s, el timeout.
¿Qué es un callback y cómo evitar el callback help?
Un callback es una función pasada como argumento a otra función para ejecutarse al completar una operación. Útil para encadenar tareas, pero anidar demasiadas provoca el patrón llamado callback help, difícil de leer y mantener, y propenso a errores por un “typo” o un mal llamado que puede romper el programa.
Definición: función que se ejecuta cuando se completa una operación asíncrona.
Uso típico: APIs del navegador, timers, operaciones diferidas.
Riesgos al anidar: caída en callback help, dificultad de depuración, fragilidad ante errores.
Se puede encadenar “n” pasos, pero la estructura se complica rápido.
Un error en cualquier nivel puede romper toda la secuencia.
¿Por qué usar promesas en JavaScript y cómo manejan errores?
Una promesa (Promise) representa un valor disponible ahora, en el futuro o nunca. Tiene estados: pendiente, cumplida o rechazada. Proporciona una sintaxis clara con then para el éxito y catch para errores. Además, puedes crear errores con new Error para obtener trazas más útiles en el navegador o en Node.js.
Estados de una promesa: pendiente, cumplida, rechazada.
Ejecutores:resolve para éxito, reject para fallo.
Encadenamiento:then para manejar resultados; catch para capturar errores.
¿Cómo implementar una Promise con then/catch y new Error?
const promesa =newPromise((resolve, reject)=>{const exito =true;// cambia a false para probar el catchsetTimeout(()=>{if(exito){resolve('operación exitosa');}else{reject(newError('algo salió mal'));}},1000);});
promesa
.then((mensaje)=>{console.log(mensaje);}).catch((error)=>{console.error('error:', error.message);});
Si exito es true: imprime “operación exitosa”.
Si exito es false: entra al catch con “algo salió mal”.
Beneficio clave: código más legible que múltiples callbacks anidados.
¿Listo para practicar? Prueba a simular llamadas a API, timers y pequeñas lecturas de archivos con callbacks y promesas. Y cuéntame en comentarios qué retos implementaste y qué dudas te surgieron al manejar errores con catch y new Error.
Callbacks — función que se pasa como argumento para ejecutarse después de algo. Simple, pero se vuelve ilegible cuando se anidan mucho (callback hell).
Promesas — objeto que representa un valor futuro. Tiene 3 estados: pendiente, cumplida o rechazada. Se encadenan con .then() y .catch(), lo que evita el callback hell y centraliza el manejo de errores.
Las promesas resolvieron muchos problemas de los callbacks, pero luego llegó async/await
Callbacks: Función que se pasa a otra función como un argumento, que luego se invoca dentro de la función externa para completar algún tipo de rutina o acción.
Callback Hell: Anidamiento de Callbacks, esa practica se debe evitar.
Promesas: Objeto que representa la terminación o el fracaso de una operación asíncrona. Estados{Pending, Fullfilled, Rellected} Respuesta{ok=Resolve, Error=Reject}
Promesa Hell: A diferencia del Callback Hell , el Promise Hell se autoinflige accidentalmente. El Promise Hell es simplemente una falta de familiaridad con las Promesas.
Promesa All: El método Promise.all(iterable) devuelve una promesa que termina correctamente cuando todas las promesas en el argumento iterable han sido concluídas con éxito, o bien rechaza la petición con el motivo pasado por la primera promesa que es rechazada.
Promesa Race: El método Promise. race() funciona como una «la primera que se procese»: la primera promesa del que sea procesada, independientemente de que se haya cumplido o rechazado, determinará la devolución de la promesa del Promise. race() . Si se cumple, devuelve una promesa cumplida, en caso negativo, devuelve una rechazada.
Fetch: Función que permite enviar solicitudes a URLs de API web y obtener respuestas, proporciona una interfaz para acceder y manipular partes del canal HTTP, como peticiones y respuestas, proporciona un método global fetch() que permite obtener recursos de forma asíncrona por la red.
Sync/Await: Función ASYNC puede contener una expresión AWAIT, la cual pausa la ejecución de la función asíncrona y espera la resolución de la Promise pasada y, a continuación, reanuda la ejecución de la función ASYNC y devuelve el valor resuelto.
Axios: es una biblioteca JavaScript popular que se utiliza para realizar solicitudes HTTP desde un navegador web o Node.js. Simplifica el proceso de envío de solicitudes HTTP asincrónicas a un servidor y también gestiona la respuesta.
Comparto mis notas de la clase:
JavaScript es un lenguaje single-threaded, es la asincronía la que permite no bloquear la ejecución del programa.
Entre las opciones de asincronía tenemos:
Callbacks:
Función que se pasa como argumento a otra función y se ejecuta cuando se completa cierta ejecución.
Ejemplo: Imagina que le pides a un amigo que te traiga un café. En lugar de quedarte parado frente a la puerta esperando a que vuelva (bloqueando tu día), le das una instrucción: "Cuando tengas el café, avísame y me lo das". Ese "avísame y haz esto con el café" es el callback: una función que le pasas a otra para que se ejecute solo cuando el trabajo pesado termina.
Los callback pueden ser anidados, que se conoce como callback hell, lo mejor es evitarlos porque no son la mejor opción.
Promesas
Las promesas representan un valor que puede estar disponible ahora, en el futuro o nunca.
Tiene diferentes estados:
Pendiente
Cumplida
Rechazada
Permite trabajar y estructurar mejor solicitudes que pueden pasar en algún momento
Se declara con new Promise((resolve,reject)=>{ setTimeOut(()=>{}......