0Pricing
jQuery Academy · Leçon

Comprendre les objets différés

Assimilez les concepts fondamentaux des objets différés de jQuery, comprenez comment ils représentent les opérations asynchrones et découvrez leurs états (en attente, résolu, rejeté).

Comprendre les objets différés est une leçon jQuery Academy gratuite sur CoddyKit. Ceci est la leçon 1 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.

Opérations asynchrones et fonctions de rappel

Dans le développement web, de nombreuses tâches ne s'exécutent pas instantanément. Pensez à la récupération de données depuis un serveur ou à l'attente du clic d'un utilisateur. Ce sont des opérations asynchrones.

Traditionnellement, nous utilisions des fonctions de rappel : des fonctions qui ne s'exécutent qu'une fois une tâche asynchrone terminée. Cependant, les fonctions de rappel imbriquées peuvent mener au « callback hell », ce qui rend le code difficile à lire et à maintenir.

Découvrez les objets Deferred de jQuery

C'est là que les objets Deferred de jQuery viennent à la rescousse ! Un objet Deferred est un moyen puissant de gérer plus proprement les opérations asynchrones.

Il agit comme un espace réservé pour un résultat futur. Vous lui associez des fonctions qui s'exécuteront une fois l'opération terminée, qu'elle réussisse ou échoue, sans bloquer votre code principal.

Les trois états de Deferred

Un objet Deferred peut se trouver dans l'un des trois états suivants, qui reflètent l'avancement de la tâche asynchrone qu'il représente :

  • En attente : état initial. L'opération n'est pas encore terminée.
  • Résolu : l'opération s'est terminée avec succès.
  • Rejeté : l'opération a échoué ou a rencontré une erreur.

Une fois résolu ou rejeté, l'état d'un objet Deferred ne peut plus changer.

Créer un objet Deferred

Vous créez un nouvel objet Deferred avec $.Deferred(). Cet objet commence dans l'état pending.

Il fournit des méthodes pour modifier son état et enregistrer des fonctions de rappel qui s'exécuteront lorsque l'état changera.

Essayez d'en créer un :

var myDeferred = $.Deferred();
console.log('Deferred is pending: ' + (myDeferred.state() === 'pending'));

Signaler une réussite : .resolve()

Lorsque votre opération asynchrone se termine avec succès, vous appelez la méthode .resolve() sur votre objet Deferred.

Son état passe ainsi de pending à resolved. Les arguments transmis à .resolve() sont transmis aux fonctions de rappel de réussite.

Observez le changement d'état :

var myDeferred = $.Deferred();
console.log('Initial state: ' + myDeferred.state());

setTimeout(function() {
  myDeferred.resolve('Data fetched!');
  console.log('New state: ' + myDeferred.state());
}, 1000);

Signaler un échec : .reject()

Si votre opération asynchrone échoue, vous appelez la méthode .reject().

L'état de Deferred passe ainsi de pending à rejected. Les arguments transmis à .reject() sont envoyés aux fonctions de rappel d'échec, souvent sous forme de messages d'erreur.

Observez le fonctionnement du rejet :

var myDeferred = $.Deferred();
console.log('Initial state: ' + myDeferred.state());

setTimeout(function() {
  myDeferred.reject('Network error!');
  console.log('New state: ' + myDeferred.state());
}, 1000);

Gérer une réussite avec .done()

Pour réagir à une opération réussie (lorsque Deferred est resolved), vous associez une fonction de rappel avec la méthode .done().

Cette fonction ne s'exécutera que si .resolve() est appelé, et recevra les éventuels arguments transmis à .resolve().

Traitons quelques données :

var fetchData = function() {
  var dfd = $.Deferred();
  setTimeout(function() {
    var success = true; // Simulate success
    if (success) {
      dfd.resolve('User data loaded.');
    } else {
      dfd.reject('Failed to load user data.');
    }
  }, 1000);
  return dfd;
};

fetchData().done(function(message) {
  console.log('Success handler: ' + message);
});

Gérer un échec avec .fail()

De même, pour gérer les erreurs (lorsque Deferred est rejected), vous utilisez la méthode .fail().

La fonction de rappel transmise à .fail() ne s'exécutera que si .reject() est appelé, et recevra ses arguments.

Simulons une erreur :

var fetchData = function() {
  var dfd = $.Deferred();
  setTimeout(function() {
    var success = false; // Simulate failure
    if (success) {
      dfd.resolve('User data loaded.');
    } else {
      dfd.reject('Failed to load user data.');
    }
  }, 1000);
  return dfd;
};

fetchData().fail(function(errorMessage) {
  console.log('Error handler: ' + errorMessage);
});

Exécuter systématiquement : .always()

Il arrive que du code doive s'exécuter que l'opération asynchrone réussisse ou échoue. C'est là qu'intervient .always().

La fonction de rappel associée avec .always() s'exécutera que Deferred soit resolved ou rejected.

Utilisez .always() pour le nettoyage ou les dernières mises à jour de l'interface :

var fetchData = function(shouldSucceed) {
  var dfd = $.Deferred();
  setTimeout(function() {
    if (shouldSucceed) {
      dfd.resolve('Data received!');
    } else {
      dfd.reject('Request failed!');
    }
  }, 1000);
  return dfd;
};

fetchData(false)
  .done(function(msg) { console.log('Success: ' + msg); })
  .fail(function(err) { console.log('Failure: ' + err); })
  .always(function() { console.log('Operation finished.'); });

Protéger avec .promise()

Lorsque vous renvoyez un objet Deferred depuis une fonction, vous pouvez ne pas vouloir que du code externe puisse modifier son état (par exemple, appeler directement .resolve() ou .reject()).

La méthode .promise() renvoie une version « en lecture seule » de l'objet Deferred. Elle expose uniquement les méthodes permettant d'associer des fonctions de rappel (comme .done(), .fail() et .always()), mais pas celles qui permettent de modifier son état.

var createAsyncTask = function() {
  var dfd = $.Deferred();
  setTimeout(function() {
    dfd.resolve('Task done!');
  }, 500);
  // Return only the promise, not the full Deferred object
  return dfd.promise();
};

var taskPromise = createAsyncTask();
taskPromise.done(function(msg) {
  console.log(msg);
});

// The following would throw an error or do nothing if trying to resolve/reject a promise
// taskPromise.resolve('Attempted to resolve externally'); // This is not possible on a promise object

Vérifiez vos connaissances

Parmi les méthodes suivantes, laquelle utiliseriez-vous pour enregistrer un rappel qui s'exécute UNIQUEMENT lorsqu'un objet Deferred termine son opération asynchrone avec succès ?

Récapitulatif : bases de Deferred

Excellent travail ! Dans cette leçon, vous avez assimilé les concepts fondamentaux des objets Deferred de jQuery :

  • Ils gèrent les opérations asynchrones et évitent l'enfer des rappels.
  • Ils peuvent être dans l'état en attente, résolu ou rejeté.
  • Vous utilisez .resolve() en cas de réussite et .reject() en cas d'échec.
  • Les rappels sont associés avec .done() (réussite), .fail() (échec) et .always() (les deux).
  • .promise() renvoie un objet en lecture seule afin de protéger la modification de l'état.

Vous allez maintenant apprendre à enchaîner et à composer ces objets puissants !

Questions Fréquemment Posées

La leçon « Comprendre les objets différés » est-elle gratuite ?

Oui — le texte complet de « Comprendre les objets différés » 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 « Comprendre les objets différés » ?

Assimilez les concepts fondamentaux des objets différés de jQuery, comprenez comment ils représentent les opérations asynchrones et découvrez leurs états (en attente, résolu, rejeté). 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 1 sur 3.

Combien de temps prend la leçon « Comprendre les objets différés » ?

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