jQuery verschiebt und verspricht - .then () vs .done ()

Ich habe über aufgeschobene und versprochene jQuery-Angebote gelesen und kann den Unterschied zwischen der Verwendung von .then()& .done()für erfolgreiche Rückrufe nicht erkennen. Ich weiß, dass Eric Hynds dies erwähnt .done()und .success()derselben Funktionalität zugeordnet ist, aber ich vermute , dass dies der Fall ist, .then()da alle Rückrufe nach Abschluss eines erfolgreichen Vorgangs aufgerufen werden.

Kann mir bitte jemand die richtige Verwendung aufklären?

Die an angehängten Rückrufe done()werden ausgelöst, wenn der Aufschub behoben ist. Die an angehängten Rückrufe fail()werden ausgelöst, wenn der Aufschub abgelehnt wird.

Vor jQuery 1.8 then()war nur syntaktischer Zucker:

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

Ab 1,8, then()ist ein Alias für pipe()und gibt ein neues Versprechen finden Sie hier für weitere Informationen über pipe().

success()und error()sind nur für das jqXHRObjekt verfügbar, das durch einen Aufruf an zurückgegeben wird ajax(). Sie sind einfach Aliase für done()und fail()jeweils:

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

Ist auch done()nicht auf einen einzelnen Rückruf beschränkt und filtert Nichtfunktionen heraus (obwohl es in Version 1.8 einen Fehler mit Zeichenfolgen gibt, der in 1.8.1 behoben werden sollte):

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

Gleiches gilt für fail().

Es gibt auch Unterschiede in der Art und Weise, wie Rückgabeergebnisse verarbeitet werden (die so genannte Verkettung verkettet donenicht, während Aufrufketten thenerzeugt werden).

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

Die folgenden Ergebnisse werden protokolliert:

abc
123
undefined

Während

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

wird folgendes bekommen:

abc
abc
abc

---------- Update:

Übrigens. Ich habe vergessen zu erwähnen, dass das äußere Versprechen wartet, bis das innere Versprechen aufgelöst ist, wenn Sie ein Versprechen anstelle eines atomaren Wertes zurückgeben:

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

Auf diese Weise wird es sehr einfach, parallele oder sequentielle asynchrone Operationen zu erstellen, wie z.

// 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
})

Der obige Code gibt zwei http-Anforderungen parallel aus, wodurch die Anforderungen früher abgeschlossen werden, während die folgenden http-Anforderungen nacheinander ausgeführt werden, wodurch die Serverlast verringert wird

// 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() hat nur einen Rückruf und es ist der Erfolgsrückruf

.then() hat sowohl erfolgreiche als auch fehlgeschlagene Rückrufe

.fail() hat nur einen Fail-Callback

Es liegt also an Ihnen, was Sie tun müssen. Interessiert es Sie, ob es erfolgreich ist oder ob es fehlschlägt?

deferred.done ()

Fügt Handler hinzu, die nur aufgerufen werden , wenn Deferred behoben ist . Sie können mehrere zurückzurufende Rückrufe hinzufügen.

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

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

Sie können auch oben so schreiben,

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

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

deferred.then ()

Fügt Handler hinzu, die aufgerufen werden sollen, wenn Zurückgestellt aufgelöst, abgelehnt oder noch ausgeführt wird .

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

Es gibt tatsächlich einen ziemlich kritischen Unterschied, da jQuery's Deferreds eine Implementierung von Promises sein sollen (und jQuery3.0 tatsächlich versucht, sie in die Spezifikation zu bringen).

Der Hauptunterschied zwischen erledigt / dann ist das

• .done() Gibt IMMER dieselben Promise / Wrapped-Werte zurück, mit denen es begonnen hat, unabhängig davon, was Sie tun oder was Sie zurückgeben.
• .then() Gibt immer ein NEUES Versprechen zurück, und Sie sind dafür verantwortlich, zu steuern, was dieses Versprechen basierend auf der Funktion, die Sie übergeben haben, zurückgegeben hat.

Die Übersetzung von jQuery in native ES2015-Versprechungen .done()ähnelt der Implementierung einer "Tap" -Struktur um eine Funktion in einer Versprechenskette, indem sie einen Wert an eine Funktion übergibt , wenn sich die Kette im Zustand "Auflösen" befindet. Das Ergebnis dieser Funktion wirkt sich jedoch NICHT auf die Kette selbst aus.

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

Diese werden beide 5 protokollieren, nicht 6.

Beachten Sie, dass ich done und doneWrap zum Protokollieren verwendet habe, nicht .then. Das liegt daran, dass die Funktionen console.log eigentlich nichts zurückgeben. Und was passiert, wenn Sie eine Funktion übergeben, die nichts zurückgibt?

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

Das wird protokollieren:

5

nicht definiert

Was ist passiert? Wenn ich .then verwendet und ihm eine Funktion übergeben habe, die nichts zurückgegeben hat, war das implizite Ergebnis "undefined" ... was natürlich ein Versprechen [undefined] an die nächste then-Methode zurückgab, die undefined protokollierte. Der ursprüngliche Wert, mit dem wir begonnen haben, ging also im Grunde verloren.

.then()ist im Kern eine Form der Funktionszusammensetzung: Das Ergebnis jedes Schritts wird im nächsten Schritt als Argument für die Funktion verwendet. Aus diesem Grund wird .done am besten als "Tippen" betrachtet -> es ist nicht Teil der Komposition, sondern nur etwas, das einen Blick auf den Wert in einem bestimmten Schritt wirft und eine Funktion mit diesem Wert ausführt, sich aber nicht wirklich ändert die Komposition in irgendeiner Weise.

Dies ist ein ziemlich grundlegender Unterschied, und es gibt wahrscheinlich einen guten Grund, warum native Promises keine .done-Methode selbst implementiert haben. Wir müssen uns nicht damit befassen, warum es keine .fail-Methode gibt, da dies noch komplizierter ist (nämlich .fail / .catch sind KEINE Spiegel von .done / .then -> -Funktionen in .catch, die keine bloßen Werte zurückgeben "bleib" abgelehnt wie die an .then, sie beschließen!)

then()bedeutet immer, dass es in jedem Fall aufgerufen wird. Die übergebenen Parameter sind jedoch in verschiedenen jQuery-Versionen unterschiedlich.

Vor jQuery 1.8 ist then()gleichdone().fail() . Alle Rückruffunktionen haben dieselben Parameter.

Ab jQuery 1.8 then() ein neues Versprechen zurückgegeben. Wenn es einen Wert zurückgibt, wird es an die nächste Rückruffunktion übergeben.

Sehen wir uns das folgende Beispiel an:

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

Vor jQuery 1.8 sollte die Antwort lauten

result = 3
result = 3
result = 3

Alles resultdauert 3. Undthen() Funktion übergibt immer das gleiche zurückgestellte Objekt an die nächste Funktion.

Ab jQuery 1.8 sollte das Ergebnis jedoch Folgendes sein:

result = 3
result = 7
result = NaN

Da die erste then()Funktion ein neues Versprechen zurückgibt und der Wert 7 (und dies ist der einzige Parameter, der weitergegeben wird) an die nächste übergeben wird done(), wird der zweite done()geschrieben result = 7. Die zweite then()nimmt 7 als Wert von aund nimmt undefinedals Wert von b, so dass die zweite then()ein neues Versprechen mit dem Parameter NaN zurückgibt und die letzte done()NaN als Ergebnis druckt.

Es gibt eine sehr einfache mentale Zuordnung als Antwort, die in den anderen Antworten etwas schwer zu finden war:

• doneGeräte tapwie in Bluebird Promises

• thenimplementiert thenwie in ES6 Promises

Benutz nur .then()

Dies sind die Nachteile von .done()

• kann nicht angekettet werden
• Blockaufruf resolve()(alle .done()Handler werden synchron ausgeführt)
• resolve()möglicherweise eine Ausnahme von registrierten .done()Handlern (!)
• eine Ausnahme in einer .done()halben Tötung der aufgeschobenen:
  • Weitere .done()Handler werden stillschweigend übersprungen

Ich dachte vorübergehend, dass dies .then(oneArgOnly)immer erforderlich ist, .catch()damit keine Ausnahme stillschweigend ignoriert wird, aber das stimmt nicht mehr: Das unhandledrejectionEreignis protokolliert nicht behandelte .then()Ausnahmen auf der Konsole (standardmäßig). Sehr vernünftig! Kein Grund mehr zu verwenden .done().

Beweis

Das folgende Codefragment zeigt, dass:

• Alle .done()Handler werden zum Zeitpunkt von als synchron bezeichnetresolve()
  • protokolliert als 1, 3, 5, 7
  • protokolliert, bevor das Skript durch den Boden fällt
• Ausnahme in einem .done()beeinflusst resolve()Anrufer
  • über catch around angemeldet resolve()
• Ausnahme bricht Versprechen von weiterer .done()Auflösung
  • 8 und 10 werden nicht protokolliert!
• .then() hat keines dieser Probleme
  • wird als 2, 4, 6, 9, 11 protokolliert, nachdem der Thread im Leerlauf ist
  • (Snippet-Umgebung hat keine unhandledrejectionis scheint)

Übrigens können Ausnahmen von .done()nicht richtig abgefangen werden: Aufgrund des synchronen Musters von .done()wird der Fehler entweder an der Stelle .resolve()(möglicherweise Bibliothekscode!) Oder beim .done()Aufruf ausgelöst, der den Täter anhängt, wenn die Zurückstellung bereits behoben ist.

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>

Ab jQuery 3.0 gibt es noch einen entscheidenden Unterschied, der leicht zu unerwartetem Verhalten führen kann und in früheren Antworten nicht erwähnt wurde:

Betrachten Sie den folgenden Code:

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>

Dies wird Folgendes ausgeben:

then
now

Nun ersetzen done()durch then()im gleichen Schnipsel:

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>

Ausgabe ist jetzt:

now
then

Bei sofort aufgelösten Verzögerungen wird die übergebene Funktion done()immer synchron aufgerufen, während jedes übergebene Argument then()asynchron aufgerufen wird.

Dies unterscheidet sich von früheren jQuery-Versionen, bei denen beide Rückrufe synchron aufgerufen werden, wie im Upgrade-Handbuch erwähnt :

Eine weitere Verhaltensänderung, die für die Einhaltung von Promises / A + erforderlich ist, besteht darin, dass verzögerte .then () -Rückrufe immer asynchron aufgerufen werden. Wenn zuvor ein .then () - Rückruf zu einem Deferred hinzugefügt wurde, der bereits aufgelöst oder abgelehnt wurde, wurde der Rückruf sofort und synchron ausgeführt.

.done()Beendet die Versprechenskette und stellt sicher, dass nichts anderes weitere Schritte anhängen kann. Dies bedeutet, dass die Implementierung des jQuery-Versprechens jede nicht behandelte Ausnahme auslösen kann, da niemand damit umgehen kann.fail() .

In der Praxis sollten Sie verwenden, wenn Sie nicht vorhaben, einem Versprechen weitere Schritte beizufügen .done(). Weitere Einzelheiten erfahren Sie, warum Versprechungen gemacht werden müssen