En el desarrollo de aplicaciones web modernas, manejar operaciones que toman tiempo, como solicitudes de red, lecturas de archivos o cualquier procesamiento asíncrono, es fundamental. JavaScript ofrece varias técnicas para manejar la asincronía, cada una evolucionando sobre la anterior para proporcionar una forma más clara y robusta de gestionar operaciones asíncronas. Este capítulo explora las tres técnicas principales: Callbacks, Promesas y Async/Await, explicando cómo cada una funciona y cuándo es más apropiado usarlas.
Un callback es una función que se pasa a otra función como argumento y se ejecuta después de que se completa una tarea.
Uso Básico de Callbacks:
– Los callbacks son útiles para operaciones simples de asincronía, pero pueden llevar a problemas conocidos como «Callback Hell» cuando se anidan múltiples callbacks.
function descargarArchivo(url, callback) {
console.log(`Descargando archivo desde ${url}...`);
setTimeout(() => { // Simula una descarga
let datosDescargados = "Datos del archivo";
callback(datosDescargados);
}, 2000);
}
descargarArchivo('http://ejemplo.com/archivo', function(datos) {
console.log('Procesando datos descargados:', datos);
});
Una promesa es un objeto que representa la eventual finalización o falla de una operación asíncrona. Esencialmente, es un valor devuelto al cual adjuntar callbacks, en lugar de pasar callbacks a una función.
Creación y Uso de Promesas:
– Las promesas pueden ser en cadena y son ideales para evitar el anidamiento excesivo de callbacks.
function descargarArchivo(url) {
return new Promise((resolve, reject) => {
console.log(`Descargando archivo desde ${url}...`);
setTimeout(() => {
if (url.startsWith("http")) {
resolve("Datos del archivo");
} else {
reject(new Error("Solo se pueden descargar archivos desde HTTP"));
}
}, 2000);
});
}
descargarArchivo('http://ejemplo.com/archivo')
.then(datos => {
console.log('Procesando datos descargados:', datos);
})
.catch(error => {
console.error('Error durante la descarga:', error.message);
});
async y await son extensiones de las promesas que permiten escribir código asíncrono que se lee como si fuera síncrono, mejorando la legibilidad y simplicidad.
Funciones Async:
– Una función declarada como async devuelve una promesa, y dentro de ella, puedes usar await para pausar la ejecución de la función hasta que la promesa esperada se resuelva.
async function procesarArchivo(url) {
try {
let datos = await descargarArchivo(url);
console.log('Procesando datos descargados:', datos);
} catch (error) {
console.error('Error durante la descarga:', error.message);
}
}
procesarArchivo('http://ejemplo.com/archivo');
