for - jquery when function done




jQuery différé et promet-.then() vs.done() (6)

deferred.done ()

ajoute des gestionnaires à appeler uniquement lorsque Deferred est résolu . 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 aussi écrire ci-dessus comme ça,

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 différé est résolu, rejeté ou 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);
}

J'ai lu sur les ajouts et promesses de jQuery et je ne vois pas la différence entre utiliser .then() & .done() pour les callbacks réussis. Je sais qu'Eric Hynds mentionne que .done() et .success() correspondent à la même fonctionnalité mais je suppose que cela est .then() car tous les callbacks sont invoqués à la fin d'une opération réussie.

Quelqu'un peut-il m'éclairer s'il vous plaît à l'utilisation correcte?

Merci beaucoup


Il y a aussi une différence dans la façon dont les résultats de retour sont traités (son chaînage appelé, done ne chaînera pas alors qu'il produira 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

---------- Mettre à 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 se résolve:

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 permet de terminer les requêtes plus tôt, tandis que ces requêtes http sont exécutées de manière séquentielle, 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
})

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


Les rappels attachés à done() seront déclenchés lorsque le différé est résolu. Les rappels attachés à fail() seront déclenché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 )

A partir de la version 1.8, then() est un alias pour pipe() et renvoie une nouvelle promesse, voir here pour plus d'informations sur pipe() .

success() et error() ne sont disponibles que sur l'objet jqXHR 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 callback et va filtrer les non-fonctions (bien qu'il y ait un bug avec les 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 );

Pareil pour fail() .


.done() termine la chaîne de promesses, s'assurant que rien d'autre ne peut attacher d'autres étapes. Cela signifie que l'implémentation de la promesse jQuery peut générer une exception non .fail() , car personne ne peut la gérer en utilisant .fail() .

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


then() signifie toujours qu'il sera appelé dans tous les cas. Mais les paramètres passant sont différents dans 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() renvoie une nouvelle promesse, et si elle renvoie une valeur, elle sera passée à la fonction de rappel suivante.

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 le result prend 3. Et then() fonction then() 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 fonction then() renvoie une nouvelle promesse, et la valeur 7 (et c'est le seul paramètre qui passera) est passée à la prochaine done() , ainsi le second done() écrit result = 7 . La seconde then() prend 7 comme valeur de a et prend undefined comme valeur de b , donc la seconde then() renvoie une nouvelle promesse avec le paramètre NaN, et la dernière done() imprime NaN comme résultat.







jquery-deferred