jQuery Academy · Lección

Gestión de varias tareas asíncronas

Domine la coordinación de varias tareas asíncronas independientes o dependientes, garantizando el orden correcto de ejecución y la gestión de errores en todas las operaciones.

Gestión de varias tareas asíncronas es una lección gratuita de jQuery Academy en CoddyKit. Esta es la lección 3 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.

¿Por qué coordinar tareas asíncronas?

En el desarrollo web, muchas operaciones son asíncronas. Esto significa que no ocurren de forma instantánea ni siguiendo una secuencia estricta. Piense en obtener datos de un servidor, cargar imágenes o ejecutar animaciones.

Cuando su aplicación necesita realizar varias de estas tareas a la vez o en un orden específico, necesita una forma de coordinarlas eficazmente. ¡Esta lección le mostrará cómo hacerlo!

El desafío de las tareas múltiples

Imagine que necesita cargar el perfil de un usuario y sus notificaciones más recientes. Ambas son solicitudes independientes al servidor.

¿Cómo sabe cuándo han finalizado ambas?
¿Qué ocurre si una falla?
¿Qué ocurre si una depende de la otra (por ejemplo, obtener las notificaciones correspondientes a un ID de usuario específico que se encuentra en el perfil)?

Sin una coordinación adecuada, su interfaz de usuario podría mostrar datos incompletos o dejar de funcionar por completo.

Introducción a `$.when()` para tareas paralelas

El $.when() de jQuery es una herramienta potente para coordinar varias operaciones asíncronas independientes. Recibe uno o más objetos Deferred/Promise como argumentos.

$.when() devuelve una Promise maestra que se resuelve cuando se han resuelto todas las Promises individuales que se le han pasado. Si alguna de ellas se rechaza, la Promise maestra se rechaza inmediatamente.

Ejemplo de `$.when()`: obtención en paralelo

Simulemos la obtención en paralelo de dos conjuntos de datos diferentes. Usaremos $.Deferred() para imitar solicitudes AJAX con fines ilustrativos.

Pruebe a ejecutar este código:

// Assume jQuery is loaded in the environment
$(function() {
  function fetchData(name, delay) {
    let dfd = $.Deferred();
    setTimeout(function() {
      console.log(`Finished fetching ${name}`);
      dfd.resolve(`Data for ${name}`);
    }, delay);
    return dfd.promise();
  }

  let profilePromise = fetchData("User Profile", 1500);
  let settingsPromise = fetchData("App Settings", 800);

  console.log("Starting parallel fetches...");

  $.when(profilePromise, settingsPromise)
    .done(function(profileData, settingsData) {
      console.log("All data loaded successfully!");
      console.log(`Profile: ${profileData}`);
      console.log(`Settings: ${settingsData}`);
    });
});

Gestionar los resultados de `$.when()`

Cuando se resuelve la Promise de $.when(), su callback .done() recibe los valores resueltos de cada una de las Promises originales como argumentos independientes.

Si pasa N Promises a $.when(), la callback .done() recibirá N argumentos.
Los argumentos aparecen en el mismo orden en que se pasaron las Promises a $.when().

Esto facilita trabajar con todos los resultados una vez que están listos.

Gestión de errores de `$.when()`

¿Qué ocurre si falla una de las operaciones paralelas? La Promise maestra de $.when() se rechaza inmediatamente si se rechaza cualquiera de las Promises individuales.

A continuación, se activa la callback .fail(), que recibe el motivo del rechazo de la primera Promise que falló. Las operaciones paralelas restantes continuarán hasta completarse, pero $.when() ya habrá indicado el fallo.

Ejemplo: `$.when()` con un fallo

Modifiquemos el ejemplo anterior para que falle una de las solicitudes. Observe la salida:

// Assume jQuery is loaded in the environment
$(function() {
  function fetchData(name, delay, shouldSucceed = true) {
    let dfd = $.Deferred();
    setTimeout(function() {
      if (shouldSucceed) {
        console.log(`Finished fetching ${name}`);
        dfd.resolve(`Data for ${name}`);
      } else {
        console.log(`Failed to fetch ${name}`);
        dfd.reject(`Error: ${name} could not be loaded`);
      }
    }, delay);
    return dfd.promise();
  }

  let profilePromise = fetchData("User Profile", 1500, true);
  let settingsPromise = fetchData("App Settings", 800, false); // This one will fail

  console.log("Starting parallel fetches (one will fail)...");

  $.when(profilePromise, settingsPromise)
    .done(function(profileData, settingsData) {
      console.log("All data loaded successfully! (This won't run)");
    })
    .fail(function(errorReason) {
      console.log("One or more operations failed!");
      console.log(`Reason: ${errorReason}`);
    });
});

Coordinar tareas dependientes

A veces, las tareas no son independientes. Es posible que necesite:

Obtener un ID de usuario.
Usar después ese ID para obtener los datos del usuario.
Usar después esos datos para obtener las publicaciones específicas del usuario.

Esto requiere una cadena secuencial de operaciones asíncronas, en la que cada paso depende del éxito y del resultado del anterior. Lo conseguimos encadenando .then() o .pipe().

Ejemplo: encadenar solicitudes AJAX dependientes

Esta es una forma de encadenar dos llamadas AJAX simuladas en la que la segunda depende del resultado de la primera. Observe cómo el valor devuelto por el primer .then() se convierte en la entrada del siguiente.

// Assume jQuery is loaded in the environment
$(function() {
  function fetchUserId() {
    let dfd = $.Deferred();
    setTimeout(() => {
      console.log("User ID fetched: 123");
      dfd.resolve(123);
    }, 500);
    return dfd.promise();
  }

  function fetchUserDetails(userId) {
    let dfd = $.Deferred();
    setTimeout(() => {
      if (userId === 123) {
        console.log(`Details fetched for user ${userId}`);
        dfd.resolve(`Details for User ${userId}`);
      } else {
        dfd.reject("Invalid User ID");
      }
    }, 700);
    return dfd.promise();
  }

  console.log("Starting dependent fetch chain...");

  fetchUserId()
    .then(function(id) {
      return fetchUserDetails(id); // Return a new promise
    })
    .done(function(details) {
      console.log("Full chain successful!");
      console.log(`Final Result: ${details}`);
    })
    .fail(function(error) {
      console.log("Chain failed:", error);
    });
});

Compruebe sus conocimientos

Considere un escenario en el que desea cargar el perfil de un usuario y su lista de amigos. La solicitud de la lista de amigos necesita el ID del usuario, que forma parte de los datos del perfil.

¿Qué enfoque de jQuery es el más adecuado para esta coordinación específica?

Repaso: dominar la coordinación asíncrona

¡Ha aprendido a gestionar varias tareas asíncronas de forma eficaz!

$.when(): Es ideal para ejecutar tareas independientes en paralelo y esperar a que todas finalicen o a que alguna falle.
Encadenamiento con .then(): Es perfecto para tareas dependientes, en las que se necesita la salida de una operación para realizar la siguiente.
Gestión de errores: Tanto $.when() como las Promises encadenadas proporcionan .fail() para detectar rechazos en cualquier punto, lo que hace que sus aplicaciones sean más sólidas.

Estos patrones son fundamentales para crear aplicaciones web dinámicas y receptivas con jQuery.

Preguntas frecuentes

¿La lección «Gestión de varias tareas asíncronas» es gratis?

Sí — el texto completo de «Gestión de varias tareas asíncronas» 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 «Gestión de varias tareas asíncronas»?

Domine la coordinación de varias tareas asíncronas independientes o dependientes, garantizando el orden correcto de ejecución y la gestión de errores en todas las operaciones. 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 3 de 3.

¿Cuánto tiempo toma la lección «Gestión de varias tareas asíncronas»?

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

← Volver a jQuery Academy