Як ви працюєте з масивом jQuery Deferreds?

У мене є додаток, який вимагає завантаження даних у певному порядку: коренева URL-адреса, потім схеми, потім нарешті ініціалізувати додаток із схемами та URL-адресами для різних об'єктів даних. Коли користувач орієнтується у програмі, об'єкти даних завантажуються, перевіряються у відповідності зі схемою та відображаються. Оскільки користувачі CRUD визначають дані, схеми забезпечують перевірку першого проходження.

У мене проблема з ініціалізацією. Я використовую виклик Ajax для отримання кореневого об'єкта $ .when (), а потім створюю масив обіцянок, по одному для кожного об'єкта схеми. Це працює. Я бачу підбір в консолі.

Потім я бачу доступ до всіх схем, тому кожен виклик $ .ajax () працює. fetchschemas () дійсно повертає масив обіцянок.

Однак той фінальний момент, коли () пункт ніколи не запускається, а слово "Зроблено" ніколи не з’являється на консолі. Вихідний код до jquery-1.5, мабуть, означає, що "null" є прийнятним як об'єкт для передачі до $ .when.apply (), як коли () створить внутрішній об'єкт Deferred () для управління списком, якщо жодного об'єкта немає передав.

Це працювало за допомогою Futures.js. Як слід керувати масивом jQuery Deferreds, якщо не так?

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

Ви шукаєте

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

Це також буде працювати (для деякої вартості роботи він не виправить зламаний аякс):

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

Ви хочете пройти $замість nullтого, на що посилається thisвсередині . Це не має значення для джерела, але краще, ніж проходити .$.whenjQuerynull

Знущалися з усіх ваших $ .ajax, замінюючи їх $.whenна зразок і працює

Отже, це або проблема у вашому запиті на ajax, або у масиві, який ви переходите до fetch_schemas.

Вирішене рішення (спасибі!) Не належним чином вирішує проблему повернення об'єктів, наданих resolve()методу відкладеного, оскільки jQuery викликає зворотні done()та fail()виклики з окремими параметрами, а не масив. Це означає, що ми повинні використовувати argumentsпсевдомасив, щоб отримати всі вирішені / відхилені об’єкти, повернуті масивом відкладених, що некрасиво:

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

Оскільки ми пройшли масив відкладених, було б непогано повернути масив результатів. Було б також непогано повернути фактичний масив замість псевдомасиву, щоб ми могли використовувати такі методи Array.sort().

Ось рішення, натхнене методом When.js , when.all()який вирішує ці проблеми:

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

Тепер ви можете просто передати масив відкладених / обіцянок і отримати масив вирішених / відхилених об'єктів у зворотному дзвінку, наприклад:

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

Якщо ви використовуєте версію javascript ES6 Є оператор розповсюдження (...), який перетворює масив об'єктів у аргументи, розділені комами.

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

Більше про оператора поширення ES6 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator знайдіть тут

поширюється, коли з цим кодом:

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