Wie arbeiten Sie mit einem Array von jQuery Deferreds?

Ich habe eine Anwendung, bei der Daten in einer bestimmten Reihenfolge geladen werden müssen: die Stamm-URL, dann die Schemas und schließlich die Anwendung mit den Schemas und URLs für die verschiedenen Datenobjekte initialisieren. Während der Benutzer durch die Anwendung navigiert, werden Datenobjekte geladen, anhand des Schemas überprüft und angezeigt. Während der Benutzer die Daten CRUDs, bieten die Schemas eine First-Pass-Validierung.

Ich habe ein Problem mit der Initialisierung. Ich verwende einen Ajax-Aufruf, um das Stammobjekt $ .when () abzurufen und dann ein Array von Versprechungen zu erstellen, eines für jedes Schemaobjekt. Das funktioniert. Ich sehe den Abruf in der Konsole.

Ich sehe dann den Abruf für alle Schemas, so dass jeder Aufruf von $ .ajax () funktioniert. fetchschemas () gibt tatsächlich eine Reihe von Versprechungen zurück.

Diese letzte when () -Klausel wird jedoch niemals ausgelöst und das Wort "DONE" wird niemals auf der Konsole angezeigt. Der Quellcode für jquery-1.5 scheint zu implizieren, dass "null" als Objekt akzeptabel ist, das an $ .when.apply () übergeben werden soll, da wenn () ein internes Deferred () -Objekt erstellt, um die Liste zu verwalten, wenn kein Objekt vorhanden ist übergeben.

Dies funktionierte mit Futures.js. Wie sollte ein Array von jQuery Deferreds verwaltet werden, wenn dies nicht der Fall ist?

    var fetch_schemas, fetch_root;

    fetch_schemas = function(schema_urls) {
        var fetch_one = function(url) {
            return $.ajax({
                url: url,
                data: {},
                contentType: "application/json; charset=utf-8",
                dataType: "json"
            });
        };

        return $.map(schema_urls, fetch_one);
    };

    fetch_root = function() {
        return $.ajax({
            url: BASE_URL,
            data: {},
            contentType: "application/json; charset=utf-8",
            dataType: "json"
        });
    };

    $.when(fetch_root()).then(function(data) {
        var promises = fetch_schemas(data.schema_urls);
        $.when.apply(null, promises).then(function(schemas) {
            console.log("DONE", this, schemas);
        });
    });

Du schaust nach

$.when.apply($, promises).then(function(schemas) {
     console.log("DONE", this, schemas);
}, function(e) {
     console.log("My ajax failed");
});

Dies wird auch funktionieren (für einen gewissen Wert der Arbeit wird gebrochener Ajax nicht behoben):

$.when.apply($, promises).done(function() { ... }).fail(function() { ... });` 

Sie möchten $stattdessen passieren, nulldamit sich thisinnen darauf $.whenbezieht jQuery. Es sollte für die Quelle keine Rolle spielen, aber es ist besser als vorbei zu gehen null.

Verspottet alle Ihre $ .ajax durch Ersetzen durch $.whenund das Beispiel funktioniert

Es ist also entweder ein Problem in Ihrer Ajax-Anfrage oder in dem Array, das Sie an fetch_schemas übergeben.

Die obige Problemumgehung (danke!) Behebt das Problem, dass die für die verzögerte resolve()Methode bereitgestellten Objekte wiederhergestellt werden, nicht richtig , da jQuery die done()und fail()-Rückrufe mit einzelnen Parametern aufruft , nicht mit einem Array. Das heißt, wir müssen das argumentsPseudo-Array verwenden, um alle aufgelösten / zurückgewiesenen Objekte zu erhalten, die vom Array der zurückgestellten zurückgesendet werden, was hässlich ist:

$.when.apply($, promises).then(function() {
     var schemas=arguments; // The array of resolved objects as a pseudo-array
     ...
};

Da wir eine Reihe von Verzögerungen übergeben haben, wäre es schön, eine Reihe von Ergebnissen zurückzugewinnen. Es wäre auch schön, ein tatsächliches Array anstelle eines Pseudo-Arrays zurückzugewinnen, damit wir Methoden wie verwenden können Array.sort().

Hier ist eine Lösung, die von der Methode von when.js inspiriert ist when.all(), mit der diese Probleme behoben werden:

// Put somewhere in your scripting environment
if (jQuery.when.all===undefined) {
    jQuery.when.all = function(deferreds) {
        var deferred = new jQuery.Deferred();
        $.when.apply(jQuery, deferreds).then(
            function() {
                deferred.resolve(Array.prototype.slice.call(arguments));
            },
            function() {
                deferred.fail(Array.prototype.slice.call(arguments));
            });

        return deferred;
    }
}

Jetzt können Sie einfach eine Reihe von zurückgestellten / versprochenen Versprechungen übergeben und eine Reihe von aufgelösten / abgelehnten Objekten in Ihrem Rückruf zurückerhalten, wie folgt:

$.when.all(promises).then(function(schemas) {
     console.log("DONE", this, schemas); // 'schemas' is now an array
}, function(e) {
     console.log("My ajax failed");
});

Wenn Sie eine ES6-Version von Javascript verwenden Es gibt einen Spread-Operator (...), der ein Array von Objekten in durch Kommas getrennte Argumente konvertiert.

$.when(...promises).then(function() {
 var schemas=arguments; 
};

Weitere Informationen zum ES6-Spread-Operator https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator finden Sie hier

verlängert sich mit diesem Code:

var rawWhen = $.when
$.when = function(promise) {
    if ($.isArray(promise)) {
        var dfd = new jQuery.Deferred()
        rawWhen.apply($, promise).done(function() {
            dfd.resolve(Array.prototype.slice.call(arguments))
        }).fail(function() {
            dfd.reject(Array.prototype.slice.call(arguments))
        })
        return dfd.promise()
    } else {
        return rawWhen.apply($, arguments)
    }
}