jQuery Academy · Leçon

Chaînage et composition des promesses

Apprenez à chaîner plusieurs opérations asynchrones avec .then() et .pipe(), et à composer des flux de travail complexes en attendant la fin de plusieurs Promises avec $.when().

Leçon 2 sur 311 étapes

Chaînage et composition des promesses est une leçon jQuery Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.

Séquencer les opérations asynchrones

En développement web, nous devons souvent effectuer des tâches asynchrones (comme récupérer des données) dans un ordre précis. L'enchaînement des promesses nous permet de le faire proprement.

Plutôt que d'imbriquer des rappels, ce qui peut mener à l'« enfer des rappels », nous pouvons relier les opérations de manière séquentielle, ce qui rend notre code bien plus facile à lire et à maintenir.

Enchaînement avec .then()

La méthode .then() est essentielle pour réaliser des enchaînements. Lorsqu'un Deferred (ou une promesse) est résolu, son rappel .then() est exécuté. La valeur renvoyée par ce rappel peut ensuite être utilisée par le .then() suivant de l'enchaînement.

Si le rappel renvoie un nouveau Deferred, l'enchaînement attend que ce nouveau Deferred soit résolu avant de poursuivre.

Exemple simple d'enchaînement avec .then()

Examinons un exemple simple dans lequel nous simulons deux étapes asynchrones. La seconde étape s'exécute uniquement une fois la première terminée et utilise les données de cette première étape.

Remarquez comment le résultat de step1 ('Data from Step 1') est transmis à 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();
});

Flux de données dans les enchaînements .then()

La valeur renvoyée par un rappel .then() détermine l'entrée du .then() suivant.

Si vous renvoyez une valeur qui n'est pas un Deferred, cette valeur devient la valeur résolue du .then() suivant.
Si vous renvoyez un objet Deferred, l'enchaînement se met en pause jusqu'à la résolution de ce Deferred, puis sa valeur résolue est transmise au .then() suivant.

Utiliser .pipe() pour transformer des données

Bien que .then() soit désormais la norme, le .Deferred() de jQuery propose également .pipe(). Cette méthode ressemble à .then(), mais elle a été conçue à l'origine pour transformer la valeur résolue ou rejetée, ou pour filtrer le Deferred qui poursuit l'enchaînement.

.pipe() peut servir à renvoyer un nouveau Deferred qui se résout avec une valeur transformée, en la faisant ainsi passer à l'étape suivante.

Exemple de transformation avec .pipe()

Ici, nous utilisons .pipe() pour récupérer le résultat de la première opération, le transformer (par exemple, le convertir en majuscules), puis transmettre la valeur transformée au gestionnaire .done() final.

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

Composer avec $.when()

Que faire si vous avez plusieurs tâches asynchrones indépendantes, mais que vous devez attendre qu'elles soient toutes terminées avant de poursuivre ? C'est là que $.when() intervient.

$.when() accepte un ou plusieurs objets Deferred (ou promesses) comme arguments et renvoie un nouveau Deferred. Ce nouveau Deferred n'est résolu que lorsque tous les Deferred d'entrée sont résolus.

Exemple de tâches parallèles avec $.when()

Dans cet exemple, nous simulons deux requêtes AJAX indépendantes (fetchUser et fetchPosts). Nous utilisons $.when() pour attendre qu'elles soient toutes les deux terminées avant de consigner les résultats combinés.

Remarquez qu'elles s'exécutent en parallèle et non de manière séquentielle.

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

Accéder aux résultats de $.when()

Lorsque le Deferred renvoyé par $.when() est résolu, ses rappels .done() ou .then() reçoivent les valeurs résolues de chacun des Deferred d'entrée comme des arguments distincts, dans l'ordre dans lequel ils ont été transmis à $.when().

Il est ainsi facile de combiner et de traiter les données provenant de plusieurs sources dès qu'elles sont toutes disponibles.

Quiz sur l'enchaînement des promesses

Considérez l'extrait de code jQuery suivant :

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();

Quel est le résultat FINAL affiché dans la console, et dans quel ordre ?

Réponds-y dans la leçon interactive

Récapitulatif : enchaînement et composition

Nous avons appris à gérer des flux de travail asynchrones complexes :

Enchaînement avec .then() : séquence les opérations et transmet les résultats d'une étape à la suivante.
.pipe() : ancienne méthode permettant de transformer des valeurs ou de mapper des Deferred dans un enchaînement.
Composition avec $.when() : attend que plusieurs Deferred indépendants se terminent en parallèle avant de poursuivre, en fournissant leurs résultats comme des arguments distincts.

Ces modèles sont essentiels pour créer des applications asynchrones robustes et lisibles.

Gratuit pour commencer

Apprends JavaScript avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 22
Leçons: 48

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Chaînage et composition des promesses » est-elle gratuite ?

Oui — le texte complet de « Chaînage et composition des promesses » 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 « Chaînage et composition des promesses » ?

Apprenez à chaîner plusieurs opérations asynchrones avec .then() et .pipe(), et à composer des flux de travail complexes en attendant la fin de plusieurs Promises avec $.when(). 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 2 sur 3.

Combien de temps prend la leçon « Chaînage et composition des promesses » ?

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

← Retour à jQuery Academy