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?
console.log('1: inicio');
setTimeout(() => {
console.log('2: timeout resultado');
}, 1000);
console.log('3: fin');
- 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.
¿Cómo se ve un callback básico en código?
function obtenerDatos(callback) {
setTimeout(() => {
callback('datos obtenidos');
}, 2000);
}
obtenerDatos((resultado) => {
console.log(resultado);
});
- Tras 2 s se imprime “datos obtenidos”.
- Patrón claro: recibir datos y ejecutar la lógica en el callback.
¿Cómo luce la anidación con callback help?
Imagina: obtener usuario → obtener notas por userId → procesar notas (por ejemplo, a mayúsculas) y mostrar junto al nombre del usuario.
obtenerUsuario((usuario) => {
obtenerNotas(usuario.id, (notas) => {
procesarNotas(notas, (resultado) => {
console.log(usuario.nombre, resultado);
});
});
});
- 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 = new Promise((resolve, reject) => {
const exito = true; // cambia a false para probar el catch
setTimeout(() => {
if (exito) {
resolve('operación exitosa');
} else {
reject(new Error('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.
