0Pricing
jQuery Academy · Leçon

Gestion de plusieurs tâches asynchrones

Maîtrisez la coordination de plusieurs tâches asynchrones indépendantes ou dépendantes, en garantissant l’ordre d’exécution approprié et la gestion des erreurs dans toutes les opérations.

Gestion de plusieurs tâches asynchrones est une leçon jQuery Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage jQuery Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours jQuery Academy comprend 3 leçons au total.

Pourquoi coordonner les tâches asynchrones ?

En développement web, de nombreuses opérations sont asynchrones. Cela signifie qu'elles ne se produisent pas instantanément ni selon une séquence stricte. Pensez à la récupération de données depuis un serveur, au chargement d'images ou à l'exécution d'animations.

Lorsque votre application doit effectuer plusieurs de ces tâches à la fois ou dans un ordre précis, vous avez besoin d'un moyen de les coordonner efficacement. Cette leçon vous montrera comment faire !

Le défi des tâches multiples

Imaginez que vous devez charger le profil d'un utilisateur et ses dernières notifications. Il s'agit de deux requêtes distinctes adressées au serveur.

  • Comment savoir quand les deux sont terminées ?
  • Que se passe-t-il si l'une échoue ?
  • Que se passe-t-il si l'une dépend de l'autre (par exemple, pour obtenir les notifications d'un identifiant utilisateur précis trouvé dans le profil) ?

Sans coordination appropriée, votre interface utilisateur risque d'afficher des données incomplètes ou de cesser complètement de fonctionner.

Découvrir `$.when()` pour l'exécution en parallèle

Le $.when() de jQuery est un outil puissant pour coordonner plusieurs opérations asynchrones indépendantes. Il accepte un ou plusieurs objets Deferred/Promise comme arguments.

$.when() renvoie une promesse principale qui se résout lorsque toutes les promesses individuelles qui lui sont transmises sont résolues. Si l'une d'entre elles est rejetée, la promesse principale est immédiatement rejetée.

Exemple de `$.when()` : récupération en parallèle

Simulons la récupération de deux ensembles de données différents en parallèle. Nous utiliserons $.Deferred() pour imiter des requêtes AJAX à des fins de démonstration.

Essayez d'exécuter ce code :

// 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}`);
    });
});

Gérer les résultats de `$.when()`

Lorsque la promesse $.when() est résolue, son rappel .done() reçoit les valeurs résolues de chacune des promesses d'origine comme des arguments distincts.

  • Si vous transmettez N promesses à $.when(), le rappel .done() reçoit N arguments.
  • Les arguments sont dans le même ordre que les promesses transmises à $.when().

Il est ainsi facile de travailler avec tous les résultats dès qu'ils sont prêts.

Gérer les erreurs de `$.when()`

Que se passe-t-il si l'une des opérations parallèles échoue ? La promesse principale de $.when() est immédiatement rejetée si l'une des promesses individuelles est rejetée.

Le rappel .fail() est alors déclenché et reçoit la raison du rejet de la première promesse ayant échoué. Les autres opérations parallèles continuent malgré tout, mais $.when() a déjà signalé l'échec.

Exemple : `$.when()` avec un échec

Modifions l'exemple précédent afin que l'une des récupérations échoue. Observez le résultat :

// 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}`);
    });
});

Coordonner les tâches dépendantes

Parfois, les tâches ne sont pas indépendantes. Vous pouvez avoir besoin de :

  • Récupérer un identifiant utilisateur.
  • Puis utiliser cet identifiant pour récupérer les détails de l'utilisateur.
  • Puis utiliser ces détails pour récupérer ses publications spécifiques.

Cela nécessite un enchaînement séquentiel d'opérations asynchrones, dans lequel chaque étape dépend de la réussite et du résultat de la précédente. Nous y parvenons en enchaînant .then() ou .pipe().

Exemple : enchaînement de requêtes AJAX dépendantes

Voici comment enchaîner deux appels AJAX simulés lorsque le second dépend du résultat du premier. Remarquez comment la valeur renvoyée par le premier .then() devient l'entrée du suivant.

// 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);
    });
});

Vérifiez vos connaissances

Imaginez que vous souhaitez charger le profil d'un utilisateur et sa liste d'amis. La requête de la liste d'amis a besoin de l'identifiant de l'utilisateur, qui fait partie des données du profil.

Quelle approche jQuery convient le mieux à cette coordination particulière ?

Récapitulatif : maîtriser la coordination asynchrone

Vous avez appris à gérer efficacement plusieurs tâches asynchrones !

  • $.when() : idéal pour exécuter des tâches indépendantes en parallèle et attendre qu'elles soient toutes terminées ou que l'une d'elles échoue.
  • Enchaînement avec .then() : parfait pour les tâches dépendantes, lorsqu'une opération fournit la sortie nécessaire à la suivante.
  • Gestion des erreurs : $.when() et les promesses enchaînées proposent tous deux .fail() pour intercepter les rejets à tout moment, ce qui rend vos applications plus robustes.

Ces modèles sont essentiels pour créer des applications web dynamiques et réactives avec jQuery.

Questions Fréquemment Posées

La leçon « Gestion de plusieurs tâches asynchrones » est-elle gratuite ?

Oui — le texte complet de « Gestion de plusieurs tâches asynchrones » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours jQuery Academy, passe à CoddyKit PRO. Le cours jQuery Academy comprend 3 leçons au total.

Qu'est-ce que j'apprendrai dans « Gestion de plusieurs tâches asynchrones » ?

Maîtrisez la coordination de plusieurs tâches asynchrones indépendantes ou dépendantes, en garantissant l’ordre d’exécution approprié et la gestion des erreurs dans toutes les opérations. Tu pratiques jQuery Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer jQuery Academy ?

Aucune expérience préalable n'est requise. jQuery Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 3.

Combien de temps prend la leçon « Gestion de plusieurs tâches asynchrones » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon jQuery Academy ?

Oui. Chaque leçon jQuery Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Comprendre les objets différés
  2. Chaînage et composition des promesses
  3. Gestion de plusieurs tâches asynchrones
← Retour à jQuery Academy