En JavaScript, manejar operaciones asíncronas es fundamental para construir aplicaciones modernas y eficientes. Dos de las herramientas más importantes para este propósito son los callbacks y las promesas. Este artículo explora qué son, cómo funcionan, y cómo usarlos correctamente.
Un callback es una función que se pasa como argumento a otra función para que sea ejecutada más tarde. Los callbacks son una forma tradicional de manejar código asíncrono en JavaScript.
function procesarUsuario(nombre, callback) {
console.log(`Hola, ${nombre}`);
callback();
}
function despedida() {
console.log("Adios!");
}
procesarUsuario("Carlos", despedida);
// Salida:
// Hola, Carlos
// Adios!
En este ejemplo, la función despedida
se pasa como un callback a procesarUsuario
y se ejecuta después de que procesarUsuario
muestra el saludo.
Un uso típico de los callbacks es en operaciones como temporizadores o solicitudes HTTP.
setTimeout(() => {
console.log("Esto se ejecuta después de 2 segundos");
}, 2000);
Aunque los callbacks son poderosos, pueden conducir al “Callback Hell” cuando se anidan demasiados, dificultando la lectura y el mantenimiento del código.
Las promesas son una alternativa moderna para manejar operaciones asíncronas. Representan un valor que puede estar disponible ahora, en el futuro, o nunca. Las promesas tienen tres estados principales:
const promesa = new Promise((resolve, reject) => {
let exito = true;
if (exito) {
resolve("Operación exitosa!");
} else {
reject("Operación fallida.");
}
});
promesa
.then((mensaje) => {
console.log(mensaje);
})
.catch((error) => {
console.error(error);
});
El método .then()
permite encadenar varias operaciones asíncronas de manera legible.
new Promise((resolve) => {
resolve("Primera promesa cumplida");
})
.then((resultado) => {
console.log(resultado);
return "Segunda promesa cumplida";
})
.then((resultado) => {
console.log(resultado);
})
.catch((error) => {
console.error(error);
});
fetch
Un uso común de las promesas es en solicitudes HTTP con fetch
:
fetch("https://api.example.com/datos")
.then((respuesta) => respuesta.json())
.then((datos) => {
console.log(datos);
})
.catch((error) => {
console.error("Hubo un error:", error);
});
Aspecto | Callbacks | Promesas |
---|---|---|
Lectura del código | Puede ser difícil de seguir | Más limpio y legible |
Manejo de errores | Propenso a errores anidados | Manejo centralizado con .catch() |
Encadenamiento | Difícil (Callback Hell) | Sencillo y organizado |
Tanto los callbacks como las promesas son herramientas poderosas para manejar la asincronía en JavaScript. Mientras que los callbacks son más simples de implementar, las promesas ofrecen una sintaxis más elegante y robusta, especialmente para operaciones encadenadas o manejo de errores. Dominar ambas técnicas te ayudará a escribir código eficiente y mantenible.