Jak pracujesz z tablicą jQuery Deferreds?

Mam aplikację, która wymaga załadowania danych w określonej kolejności: główny adres URL, następnie schematy, a na końcu zainicjuj aplikację ze schematami i adresami URL dla różnych obiektów danych. Gdy użytkownik nawiguje po aplikacji, obiekty danych są ładowane, sprawdzane względem schematu i wyświetlane. Gdy użytkownik CRUD dane, schematy zapewniają walidację pierwszego przejścia.

Mam problem z inicjalizacją. Używam wywołania Ajax, aby pobrać obiekt główny, $ .when (), a następnie tworzę tablicę obietnic, po jednej dla każdego obiektu schematu. To działa. Widzę pobieranie w konsoli.

Następnie widzę pobieranie dla wszystkich schematów, więc każde wywołanie $ .ajax () działa. fetchschemas () rzeczywiście zwraca tablicę obietnic.

Jednak ta ostatnia klauzula when () nigdy nie jest uruchamiana, a słowo „DONE” nigdy nie pojawia się na konsoli. Kod źródłowy jquery-1.5 wydaje się sugerować, że "null" jest akceptowalne jako obiekt do przekazania do $ .when.apply (), ponieważ when () zbuduje wewnętrzny obiekt Deferred () do zarządzania listą, jeśli żaden obiekt nie jest przeszedł.

To działało przy użyciu Futures.js. Jak należy zarządzać tablicą jQuery Deferreds, jeśli nie w ten sposób?

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

Szukasz

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

To również zadziała (dla pewnej wartości pracy nie naprawi zepsutego ajax):

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

Będziesz chciał przejść $zamiast tego null, aby odnosiło się do thiswnętrza . To nie powinno mieć znaczenia dla źródła, ale lepiej niż przejście .$.whenjQuerynull

Wyśmiewano wszystkie twoje $ .ajax, zastępując je $.wheni próbka działa

Więc jest to albo problem w twoim żądaniu Ajax, albo w tablicy, którą przekazujesz do fetch_schemas.

Powyższe obejście (dzięki!) Nie rozwiązuje poprawnie problemu odzyskiwania obiektów dostarczonych do metody deferred, resolve()ponieważ jQuery wywołuje wywołania zwrotne done()i fail()z indywidualnymi parametrami, a nie tablicą. Oznacza to, że musimy użyć argumentspseudo-tablicy, aby uzyskać wszystkie rozwiązane / odrzucone obiekty zwrócone przez tablicę deferreds, co jest brzydkie:

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

Ponieważ przekazaliśmy tablicę odroczonych, dobrze byłoby otrzymać tablicę wyników. Byłoby również miło odzyskać rzeczywistą tablicę zamiast pseudo-tablicy, abyśmy mogli użyć takich metod, jak Array.sort().

Oto rozwiązanie zainspirowane metodą when.js , when.all()które rozwiązuje te problemy:

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

Teraz możesz po prostu przekazać tablicę odroczonych / obietnic i odzyskać tablicę rozwiązanych / odrzuconych obiektów w swoim wywołaniu zwrotnym, na przykład:

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

Jeśli używasz javascript w wersji ES6 Istnieje operator spreadu (...), który konwertuje tablicę obiektów na argumenty oddzielone przecinkami.

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

Więcej o operatorze spreadu ES6 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator znajdziesz tutaj

rozszerza się, gdy z tym kodem:

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