jQuery différés et promesses - .then () vs .done ()

J'ai lu sur les différés et les promesses de jQuery et je ne vois pas la différence entre l'utilisation de .then()& .done()pour des rappels réussis. Je sais que Eric Hynds le mentionne .done()et .success()mappe à la même fonctionnalité, mais je suppose que c'est le cas, .then()car tous les rappels sont tous invoqués à la fin d'une opération réussie.

Quelqu'un peut-il m'éclairer sur l'utilisation correcte?

Les rappels associés à done()seront renvoyés lorsque le différé est résolu. Les rappels associés à fail()seront renvoyés lorsque le différé est rejeté.

Avant jQuery 1.8, then()était juste du sucre syntaxique:

promise.then( doneCallback, failCallback )
// was equivalent to
promise.done( doneCallback ).fail( failCallback )

Depuis la version 1.8, then()est un alias pipe()et renvoie une nouvelle promesse, voir ici pour plus d'informations pipe().

success()et error()ne sont disponibles que sur l' jqXHRobjet renvoyé par un appel à ajax(). Ce sont des alias simples pour done()et fail()respectivement:

jqXHR.done === jqXHR.success
jqXHR.fail === jqXHR.error

De plus, done()n'est pas limité à un seul rappel et filtrera les non-fonctions (bien qu'il y ait un bug avec des chaînes dans la version 1.8 qui devrait être corrigé dans 1.8.1):

// this will add fn1 to 7 to the deferred's internal callback list
// (true, 56 and "omg" will be ignored)
promise.done( fn1, fn2, true, [ fn3, [ fn4, 56, fn5 ], "omg", fn6 ], fn7 );

Il en va de même fail().

Il y a aussi une différence dans la façon dont les résultats de retour sont traités (son appelé chaînage, donene chaîne pas tout en thenproduisant des chaînes d'appel)

promise.then(function (x) { // Suppose promise returns "abc"
    console.log(x);
    return 123;
}).then(function (x){
    console.log(x);
}).then(function (x){
    console.log(x)
})

Les résultats suivants seront enregistrés:

abc
123
undefined

Tandis que

promise.done(function (x) { // Suppose promise returns "abc"
    console.log(x);
    return 123;
}).done(function (x){
    console.log(x);
}).done(function (x){
    console.log(x)
})

obtiendra ce qui suit:

abc
abc
abc

---------- Mise à jour:

Btw. J'ai oublié de mentionner que si vous renvoyez une promesse au lieu d'une valeur de type atomique, la promesse extérieure attendra que la promesse intérieure soit résolue:

promise.then(function (x) { // Suppose promise returns "abc"
    console.log(x);
    return $http.get('/some/data').then(function (result) {
        console.log(result); // suppose result === "xyz"
        return result;
    });
}).then(function (result){
    console.log(result); // result === xyz
}).then(function (und){
    console.log(und) // und === undefined, because of absence of return statement in above then
})

de cette façon, il devient très simple de composer des opérations asynchrones parallèles ou séquentielles telles que:

// Parallel http requests
promise.then(function (x) { // Suppose promise returns "abc"
    console.log(x);

    var promise1 = $http.get('/some/data?value=xyz').then(function (result) {
        console.log(result); // suppose result === "xyz"
        return result;
    });

    var promise2 = $http.get('/some/data?value=uvm').then(function (result) {
        console.log(result); // suppose result === "uvm"
        return result;
    });

    return promise1.then(function (result1) {
        return promise2.then(function (result2) {
           return { result1: result1, result2: result2; }
        });
    });
}).then(function (result){
    console.log(result); // result === { result1: 'xyz', result2: 'uvm' }
}).then(function (und){
    console.log(und) // und === undefined, because of absence of return statement in above then
})

Le code ci-dessus émet deux requêtes http en parallèle, ce qui rend les requêtes terminées plus tôt, tandis qu'en dessous de ces requêtes http sont exécutées séquentiellement, réduisant ainsi la charge du serveur

// Sequential http requests
promise.then(function (x) { // Suppose promise returns "abc"
    console.log(x);

    return $http.get('/some/data?value=xyz').then(function (result1) {
        console.log(result1); // suppose result1 === "xyz"
        return $http.get('/some/data?value=uvm').then(function (result2) {
            console.log(result2); // suppose result2 === "uvm"
            return { result1: result1, result2: result2; };
        });
    });
}).then(function (result){
    console.log(result); // result === { result1: 'xyz', result2: 'uvm' }
}).then(function (und){
    console.log(und) // und === undefined, because of absence of return statement in above then
})

.done() n'a qu'un seul rappel et c'est le rappel de réussite

.then() a à la fois des rappels de réussite et d'échec

.fail() n'a qu'un seul échec de rappel

c'est à vous de décider ce que vous devez faire ... vous souciez-vous si cela réussit ou s'il échoue?

deferred.done ()

ajoute des gestionnaires à appeler uniquement lorsque la résolution différée est résolue . Vous pouvez ajouter plusieurs rappels à appeler.

var url = 'http://jsonplaceholder.typicode.com/posts/1';
$.ajax(url).done(doneCallback);

function doneCallback(result) {
    console.log('Result 1 ' + result);
}

Vous pouvez également écrire ci-dessus comme ceci,

function ajaxCall() {
    var url = 'http://jsonplaceholder.typicode.com/posts/1';
    return $.ajax(url);
}

$.when(ajaxCall()).then(doneCallback, failCallback);

deferred.then ()

ajoute des gestionnaires à appeler lorsque le report est résolu, rejeté ou encore en cours .

var url = 'http://jsonplaceholder.typicode.com/posts/1';
$.ajax(url).then(doneCallback, failCallback);

function doneCallback(result) {
    console.log('Result ' + result);
}

function failCallback(result) {
    console.log('Result ' + result);
}

Il y a en fait une différence assez critique, dans la mesure où les différés de jQuery sont censés être des implémentations de Promises (et jQuery3.0 essaie en fait de les mettre en spécification).

La principale différence entre done / then est que

• .done() TOUJOURS renvoie les mêmes valeurs promises / encapsulées avec lesquelles il a commencé, indépendamment de ce que vous faites ou de ce que vous retournez.
• .then() renvoie toujours une NOUVELLE promesse, et vous êtes en charge de contrôler ce que cette promesse est basée sur ce que la fonction que vous avez passée l'a renvoyée.

Traduit de jQuery en promesses natives ES2015, .done()c'est un peu comme implémenter une structure "tap" autour d'une fonction dans une chaîne Promise, en ce sens que, si la chaîne est à l'état "résoudre", transmettre une valeur à une fonction. mais le résultat de cette fonction n'affectera PAS la chaîne elle-même.

const doneWrap = fn => x => { fn(x); return x };

Promise.resolve(5)
       .then(doneWrap( x => x + 1))
       .then(doneWrap(console.log.bind(console)));

$.Deferred().resolve(5)
            .done(x => x + 1)
            .done(console.log.bind(console));

Ceux-ci enregistreront tous les deux 5, pas 6.

Notez que j'ai utilisé done et doneWrap pour faire la journalisation, pas .then. C'est parce que les fonctions console.log ne renvoient en fait rien. Et que se passe-t-il si vous passez. Puis une fonction qui ne renvoie rien?

Promise.resolve(5)
       .then(doneWrap( x => x + 1))
       .then(console.log.bind(console))
       .then(console.log.bind(console));

Cela enregistrera:

5

indéfini

Qu'est-il arrivé? Lorsque j'ai utilisé .then et que je lui ai transmis une fonction qui ne renvoyait rien, son résultat implicite était "non défini" ... ce qui bien sûr renvoyait une promesse [non définie] à la méthode then suivante, qui se connectait non définie. La valeur d'origine avec laquelle nous avons commencé a donc été essentiellement perdue.

.then()est, au fond, une forme de composition de fonction: le résultat de chaque étape est utilisé comme argument pour la fonction à l'étape suivante. C'est pourquoi .done est mieux considéré comme un "tap" -> il ne fait pas réellement partie de la composition, juste quelque chose qui jette un œil à la valeur à une certaine étape et exécute une fonction à cette valeur, mais ne modifie pas réellement la composition en aucune façon.

C'est une différence assez fondamentale, et il y a probablement une bonne raison pour laquelle les Promesses natives n'ont pas elles-mêmes implémenté une méthode .done. Nous n'avons pas besoin de comprendre pourquoi il n'y a pas de méthode .fail, car c'est encore plus compliqué (à savoir, .fail / .catch ne sont PAS des miroirs des fonctions .done / .then -> dans .catch qui renvoient des valeurs nues ne le font pas "rester" rejeté comme ceux passés à. puis, ils résolvent!)

then()signifie toujours qu'il sera appelé dans tous les cas. Mais les paramètres qui passent sont différents dans les différentes versions de jQuery.

Avant jQuery 1.8, then()est égal à done().fail(). Et toutes les fonctions de rappel partagent les mêmes paramètres.

Mais à partir de jQuery 1.8, then()retourne une nouvelle promesse, et si elle a renvoyé une valeur, elle sera passée dans la prochaine fonction de rappel.

Voyons l'exemple suivant:

var defer = jQuery.Deferred();

defer.done(function(a, b){
            return a + b;
}).done(function( result ) {
            console.log("result = " + result);
}).then(function( a, b ) {
            return a + b;
}).done(function( result ) {
            console.log("result = " + result);
}).then(function( a, b ) {
            return a + b;
}).done(function( result ) {
            console.log("result = " + result);
});

defer.resolve( 3, 4 );

Avant jQuery 1.8, la réponse devrait être

result = 3
result = 3
result = 3

Tout resultprend 3. Et la then()fonction passe toujours le même objet différé à la fonction suivante.

Mais à partir de jQuery 1.8, le résultat devrait être:

result = 3
result = 7
result = NaN

Parce que la première then()fonction renvoie une nouvelle promesse, et la valeur 7 (et c'est le seul paramètre qui sera transmis) est passée à la suivante done(), donc la deuxième done()écriture result = 7. La seconde then()prend 7 comme valeur de aet prend undefinedcomme valeur de b, donc la seconde then()renvoie une nouvelle promesse avec le paramètre NaN, et la dernière done()affiche NaN comme résultat.

Il y a une cartographie mentale très simple en réponse qui était un peu difficile à trouver dans les autres réponses:

• doneimplémente tapcomme dans Bluebird Promises

• thenimplémente thencomme dans ES6 Promises

Usage unique .then()

Ce sont les inconvénients de .done()

• ne peut pas être enchaîné
• bloquer l' resolve()appel (tous les .done()gestionnaires seront exécutés de manière synchrone)
• resolve()peut obtenir une exception de la part des .done()gestionnaires enregistrés (!)
• une exception dans un .done()demi-tue le différé:
  • d'autres .done()gestionnaires seront ignorés en silence

J'ai pensé temporairement que cela .then(oneArgOnly)nécessite toujours .catch()pour qu'aucune exception ne soit silencieusement ignorée, mais ce n'est plus vrai: l' unhandledrejectionévénement enregistre les .then()exceptions non gérées sur la console (par défaut). Très raisonnable! Aucune raison de l'utiliser .done().

Preuve

L'extrait de code suivant révèle que:

• tous les .done()gestionnaires seront appelés synchrones au point deresolve()
  • connecté en tant que 1, 3, 5, 7
  • connecté avant que le script ne tombe en bas
• exception dans un appelant d' .done()influencesresolve()
  • connecté via catch around resolve()
• exception rompt la promesse d'une nouvelle .done()résolution
  • 8 et 10 ne sont pas enregistrés!
• .then() n'a aucun de ces problèmes
  • enregistré en tant que 2, 4, 6, 9, 11 après que le fil est devenu inactif
  • (L'environnement d'extrait n'a pas unhandledrejectionest semble)

Btw, les exceptions de .done()ne peuvent pas être correctement détectées : en raison du modèle synchrone de .done(), l'erreur est soit renvoyée au point de .resolve()(peut être le code de bibliothèque!) Soit à l' .done()appel qui attache le coupable si le différé est déjà résolu.

console.log('Start of script.');
let deferred = $.Deferred();
// deferred.resolve('Redemption.');
deferred.fail(() => console.log('fail()'));
deferred.catch(()=> console.log('catch()'));
deferred.done(() => console.log('1-done()'));
deferred.then(() => console.log('2-then()'));
deferred.done(() => console.log('3-done()'));
deferred.then(() =>{console.log('4-then()-throw');
    throw 'thrown from 4-then()';});
deferred.done(() => console.log('5-done()'));
deferred.then(() => console.log('6-then()'));
deferred.done(() =>{console.log('7-done()-throw');
    throw 'thrown from 7-done()';});
deferred.done(() => console.log('8-done()'));
deferred.then(() => console.log('9-then()'));

console.log('Resolving.');
try {
    deferred.resolve('Solution.');
} catch(e) {
    console.log(`Caught exception from handler
        in resolve():`, e);
}
deferred.done(() => console.log('10-done()'));
deferred.then(() => console.log('11-then()'));
console.log('End of script.');

<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh"
crossorigin="anonymous"
></script>

Il existe une autre différence vitale avec jQuery 3.0 qui peut facilement conduire à un comportement inattendu et n'est pas mentionnée dans les réponses précédentes:

Considérez le code suivant:

let d = $.Deferred();
d.done(() => console.log('then'));
d.resolve();
console.log('now');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

cela produira:

then
now

Maintenant, remplacez done()par then()dans le même extrait:

var d = $.Deferred();
d.then(() => console.log('then'));
d.resolve();
console.log('now');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

la sortie est maintenant:

now
then

Ainsi, pour les différés résolus immédiatement, la fonction passée à done()sera toujours invoquée de manière synchrone, tandis que tout argument passé à then()sera appelé async.

Cela diffère des versions précédentes de jQuery où les deux rappels sont appelés de manière synchrone, comme mentionné dans le guide de mise à niveau :

Un autre changement de comportement requis pour la conformité Promises / A + est que les rappels différés .then () sont toujours appelés de manière asynchrone. Auparavant, si un rappel .then () était ajouté à un différé déjà résolu ou rejeté, le rappel s'exécutait immédiatement et de manière synchrone.

.done()met fin à la chaîne de promesse, en s'assurant que rien d'autre ne peut attacher d'autres étapes. Cela signifie que l'implémentation de la promesse jQuery peut lever toute exception non gérée, car personne ne peut la gérer à l'aide de .fail().

En termes pratiques, si vous ne prévoyez pas d'attacher plus d'étapes à une promesse, vous devez utiliser .done(). Pour plus de détails, voyez pourquoi les promesses doivent être faites