jQuery

Labs jQuery – Deferred, nouveauté jQuery 1.5

Flattr this!

Après .sub(), il est l'heure de vous présenter l'objet Deferred, une autre des nouveautés de jQuery 1.5.

Qu'est-ce que c'est?

L'objet Deferred a été ajouté à jQuery pour permettre de gérer aussi bien les exécutions synchrones ou asynchrones avec autant de callbacks que souhaités. Que ce soit dans la réussite ou dans l'échec de l'exécution.

Comment on s'en sert?

Comme d'habitude. Structure HTML de départ et importation de la bonne version de jQuery :

<script src="http://code.jquery.com/jquery-1.5.min.js" type="text/javascript"></script>
<script type="text/javascript"></script>

Maintenant que ça c'est fait, on passe à la suite.

Qu'est-ce qu'on fait?

Quelque chose d'extrêmement simple. Deux appels Ajax.

var oDSeraResolu = $.ajax('deferred-server.php', {});
var oDSeraRejete = $.ajax('deferred-serveur-inconnu.php', {});

En admettant que le fichier "deferred-server.php" existe bien dans le même dossier que notre fichier de départ, mais pas "deferred-server-inconnu.php". Comme ça, on est sûr que le premier appel fonctionnera et le deuxième non. Les deux cas de base à traiter en somme.

Et Deferred là dedans?

Vous l'avez sous les yeux. Et plutôt deux fois qu'une. Les deux variables oDSeraResolu et oDSeraRejete sont des objets Deferred.
Donc maintenant que je vous les ai mis en évidence. On va les utiliser.

Ajout des callbacks de succès et d'échecs

On va remplacer le code précédent. Pour mettre quelques trucs en place, on va utiliser .done() et .fail(). La première sert à ajouter une fonction de callback en cas de succès, la seconde, la même chose en cas d'échec.

var oDSeraResolu = $.ajax('deferred-server.php', {}).done(function(){
	console.log('res-0');
}).fail(function(){
	console.log('rej-0');
});
var oDSeraRejete = $.ajax('deferred-serveur-inconnu.php', {});
oDSeraRejete.done(function(){
	console.log('res-1');
});
oDSeraRejete.fail(function(){
	console.log('rej-1');
	oDSeraResolu.done(function(){console.log('res-0-1')});
});

Qu'est-ce qu'on obtient?

Avant de balancer le résultat tel quel, analysons un peu :

  • on écrit 'res-0' dans la console si le premier appel AJAX réussit (devrait)
  • on écrit 'rej-0' dans la console si le premier appel AJAX échoue (ne devrait pas)
  • on écrit 'res-1' dans la console si le second appel AJAX réussit (ne devrait pas)
  • on écrit 'rej-1' dans la console si le premier appel AJAX réussit (devrait), mais au passage, je tente le coup d'écrire 'res-0-1' si le premier appel a réussi, sauf qu'il est déjà réussi. Et on aura.

Et on obtient bien (console Chrome) :

res-0
Failed to load resource: the server responded with a status of 404 (Not Found)
rej-1
res-0-1

N'oubliez pas qu'il y a le fichier 'deferred-serveur-inconnu.php' qui n'existe pas, d'où le message d'erreur supplémentaire. En tout cas on a tout ce qu'on attendait. Vous pouvez tester sur Firefox, même résultat, sur la beta d'IE 9, la même, mais sans le message d'erreur 404 sur l'appel Ajax raté.

Pourquoi?

Le premier appel a réussi, donc le premier message (res-0) s'explique facilement. Le second aussi (rej-1). On a aussi 'res-0-1' pour une raison simple : un objet Deferred persiste même une fois tous les callbacks rattachés exécutés.

Bilan

On finit par un tour complet avec ce qu'on a vu là et quelques détails en plus.

  • L'objet Deferred est renvoyé par différentes méthodes de jQuery, notamment Ajax
  • Vous pouvez utiliser les méthodes .done() et .fail() pour ajouter des méthodes de callback en cas de réussite ou d'échec.
  • Un objet Deferred a un statut "en attente" tant que l'appel n'est pas résolu. En cas de réussite, il passe en "résolu", en cas d'échec, il passe en "rejeté". Une fois entré dans un de ces états, il n'en sortira plus.
  • Vous pouvez ajouter des callbacks à un Deferred quand vous voulez, même bien après le passage à l'état résolu ou rejeté.
  • Il existe aussi une méthode .then() qui permet d'ajouter une fonction de callback de réussite et une d'échec d'un seul coup.

Voilà, on a fait le tour, vous pouvez tester le script complet: ici.

Flattr this!

A propos de Mathieu

Ingénieur développeur web dans la vente par correspondance B2B, adepte de nouvelles technologies et d'innovation. Vous pouvez aussi me retrouver sur Twitter @mathrobin
Cette entrée a été publiée dans jQuery, avec comme mot(s)-clef(s) , , , , , , , . Vous pouvez la mettre en favoris avec ce permalien.

Articles liés