Encadenamiento y composición de Promises
Aprenda a encadenar varias operaciones asíncronas mediante .then() y .pipe(), y a componer flujos de trabajo complejos esperando a que varias Promises finalicen con $.when().
Encadenamiento y composición de Promises es una lección gratuita de jQuery Academy en CoddyKit. Esta es la lección 2 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de jQuery Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de jQuery Academy incluye 3 lecciones en total.
Secuenciar operaciones asíncronas
En el desarrollo web, a menudo necesitamos realizar tareas asíncronas (como obtener datos) en un orden específico. El encadenamiento de promises nos permite hacerlo de forma clara.
En lugar de anidar callbacks, lo que puede provocar el «infierno de callbacks», podemos vincular las operaciones secuencialmente, haciendo que nuestro código sea mucho más fácil de leer y mantener.
Encadenamiento con .then()
El método .then() es fundamental para el encadenamiento. Cuando un Deferred (o Promise) se resuelve, se ejecuta su callback de .then(). Lo que devuelve esta callback puede utilizarlo el siguiente .then() de la cadena.
Si la callback devuelve un nuevo Deferred, la cadena espera a que ese nuevo Deferred se resuelva antes de continuar.
Ejemplo sencillo de una cadena .then()
Veamos un ejemplo sencillo en el que simulamos dos pasos asíncronos. El segundo paso solo se ejecuta después de que finalice el primero y utiliza los datos del primer paso.
Observe cómo el resultado de step1 ('Data from Step 1') se pasa a step2.
function runChainExample() {
let dfd1 = new $.Deferred();
let dfd2 = new $.Deferred();
setTimeout(() => {
console.log("Step 1 complete!");
dfd1.resolve("Data from Step 1");
}, 500);
dfd1.then(function(data1) {
console.log("Received in Step 2: " + data1);
setTimeout(() => {
console.log("Step 2 complete!");
dfd2.resolve("Processed " + data1);
}, 300);
return dfd2;
}).then(function(data2) {
console.log("Received in Final Step: " + data2);
console.log("Chain finished!");
});
}
$(document).ready(function() {
runChainExample();
});Flujo de datos en cadenas .then()
El valor que devuelve una callback de .then() determina la entrada del siguiente .then().
- Si devuelve un valor que no es un Deferred, ese valor se convierte en el valor resuelto del siguiente
.then(). - Si devuelve un objeto Deferred, la cadena se pausa hasta que ese Deferred se resuelva, y su valor resuelto se pasa al siguiente
.then().
Usar .pipe() para transformar valores
Aunque .then() es el estándar moderno, el .Deferred() de jQuery también ofrece .pipe(). Es similar a .then(), pero originalmente se diseñó para transformar el valor resuelto o rechazado, o para filtrar qué Deferred continúa la cadena.
.pipe() puede utilizarse para devolver un nuevo Deferred que se resuelve con un valor transformado, canalizándolo de forma efectiva hacia la siguiente etapa.
Ejemplo de transformación con .pipe()
Aquí usamos .pipe() para tomar el resultado de la primera operación, transformarlo (por ejemplo, convertirlo a mayúsculas) y pasar después el valor transformado a la callback final de .done().
function runPipeExample() {
let dfd = new $.Deferred();
setTimeout(() => {
console.log("Initial data ready.");
dfd.resolve("hello world");
}, 500);
dfd.pipe(function(originalData) {
console.log("Piping: Transforming data...");
return originalData.toUpperCase(); // Transforms the value
}).done(function(transformedData) {
console.log("Final result: " + transformedData);
});
}
$(document).ready(function() {
runPipeExample();
});Componer con $.when()
¿Qué ocurre si tiene varias tareas asíncronas independientes, pero necesita esperar a que todas finalicen antes de continuar? Ahí es donde entra en juego $.when().
$.when() recibe uno o más objetos Deferred (o Promises) como argumentos y devuelve un nuevo Deferred. Este nuevo Deferred se resuelve únicamente cuando todos los Deferred de entrada se han resuelto.
Ejemplo de tareas paralelas con $.when()
En este ejemplo, simulamos dos solicitudes AJAX independientes (fetchUser y fetchPosts). Usamos $.when() para esperar a que ambas finalicen antes de mostrar en la consola los resultados combinados.
Observe que se ejecutan en paralelo, no secuencialmente.
function runWhenExample() {
function fetchUser() {
let dfd = new $.Deferred();
setTimeout(() => {
console.log("User data fetched.");
dfd.resolve({ id: 1, name: "Alice" });
}, 800);
return dfd.promise();
}
function fetchPosts() {
let dfd = new $.Deferred();
setTimeout(() => {
console.log("Posts data fetched.");
dfd.resolve([{ id: 101, title: "Post 1" }, { id: 102, title: "Post 2" }]);
}, 500);
return dfd.promise();
}
$.when(fetchUser(), fetchPosts())
.done(function(userData, postsData) {
console.log("All data loaded!");
console.log("User: ", userData);
console.log("Posts: ", postsData);
})
.fail(function() {
console.log("One or more tasks failed.");
});
}
$(document).ready(function() {
runWhenExample();
});Acceder a los resultados de $.when()
Cuando se resuelve el Deferred devuelto por $.when(), sus callbacks .done() o .then() reciben los valores resueltos de cada Deferred de entrada como argumentos independientes, en el orden en que se pasaron a $.when().
Esto facilita combinar y procesar datos de varias fuentes una vez que todos están disponibles.
Cuestionario sobre el encadenamiento de Promises
Considere el siguiente fragmento de código jQuery:
let dfd1 = new $.Deferred();
let dfd2 = new $.Deferred();
dfd1.then(function(val) {
return val + " World";
}).then(function(newVal) {
console.log(newVal); // Line A
return dfd2;
}).then(function() {
console.log("Finished!"); // Line B
});
dfd1.resolve("Hello");
dfd2.resolve();¿Cuál es la salida FINAL que se muestra en la consola y en qué orden?
Repaso: encadenamiento y composición
Hemos aprendido a gestionar flujos de trabajo asíncronos complejos:
- Encadenamiento con
.then(): Secuencia operaciones y pasa los resultados de una etapa a la siguiente. .pipe(): Un método antiguo para transformar valores o asignar Deferreds dentro de una cadena.- Composición con
$.when(): Espera a que varios Deferreds independientes finalicen en paralelo antes de continuar y proporciona sus resultados como argumentos independientes.
Estos patrones son fundamentales para crear aplicaciones asíncronas sólidas y fáciles de leer.
Aprende JavaScript con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 22
- Lecciones
- 48
Preguntas frecuentes
¿La lección «Encadenamiento y composición de Promises» es gratis?
Sí — el texto completo de «Encadenamiento y composición de Promises» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de jQuery Academy, actualiza a CoddyKit PRO. El curso de jQuery Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Encadenamiento y composición de Promises»?
Aprenda a encadenar varias operaciones asíncronas mediante .then() y .pipe(), y a componer flujos de trabajo complejos esperando a que varias Promises finalicen con $.when(). Practicas jQuery Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar jQuery Academy?
No se requiere experiencia previa. jQuery Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 3.
¿Cuánto tiempo toma la lección «Encadenamiento y composición de Promises»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de jQuery Academy?
Sí. Cada lección de jQuery Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Comprensión de los objetos Deferred
- Encadenamiento y composición de Promises
- Gestión de varias tareas asíncronas