Làm thế nào để bạn làm việc với một mảng của Trì hoãn jQuery?

Tôi có một ứng dụng yêu cầu dữ liệu được tải theo một thứ tự nhất định: URL gốc, sau đó là lược đồ, cuối cùng khởi tạo ứng dụng với lược đồ và url cho các đối tượng dữ liệu khác nhau. Khi người dùng điều hướng ứng dụng, các đối tượng dữ liệu được tải, xác thực theo lược đồ và được hiển thị. Khi người dùng CRUD dữ liệu, các lược đồ cung cấp xác thực thông qua đầu tiên.

Tôi đang gặp vấn đề với việc khởi tạo. Tôi sử dụng một lệnh gọi Ajax để tìm nạp đối tượng gốc, $ .when () và sau đó tạo một mảng các lời hứa, một cho mỗi đối tượng lược đồ. Điều đó làm việc. Tôi thấy tìm nạp trong giao diện điều khiển.

Sau đó tôi thấy tìm nạp cho tất cả các lược đồ, vì vậy mỗi lệnh gọi $ .ajax () hoạt động. fetchschemas () thực sự trả về một loạt các lời hứa.

Tuy nhiên, mệnh đề cuối cùng khi () không bao giờ kích hoạt và từ "DONE" không bao giờ xuất hiện trên bảng điều khiển. Mã nguồn cho jquery-1.5 dường như ngụ ý rằng "null" được chấp nhận là một đối tượng để chuyển đến $ .when.apply (), vì khi () sẽ xây dựng một đối tượng Deferred () bên trong để quản lý danh sách nếu không có đối tượng nào thông qua tại.

Điều này đã làm việc bằng Futures.js. Làm thế nào một mảng của Trì hoãn jQuery được quản lý, nếu không như thế này?

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

Bạn đang tìm

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

Điều này cũng sẽ hoạt động (đối với một số giá trị của công việc, nó sẽ không sửa lỗi ajax bị hỏng):

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

Bạn sẽ muốn vượt qua $thay vì nullđể thisbên trong $.whenđề cập đến jQuery. Nó không quan trọng đối với nguồn nhưng tốt hơn là vượt qua null.

Đã chế nhạo tất cả $ .ajax của bạn bằng cách thay thế chúng $.whenvà mẫu hoạt động

Vì vậy, đó là một vấn đề trong yêu cầu ajax của bạn hoặc mảng bạn chuyển đến fetch_schemas.

Cách giải quyết ở trên (cảm ơn!) Không giải quyết đúng vấn đề lấy lại các đối tượng được cung cấp cho resolve()phương thức bị trì hoãn vì jQuery gọi done()và fail()gọi lại với các tham số riêng lẻ, không phải là một mảng. Điều đó có nghĩa là chúng ta phải sử dụng argumentsmảng giả để có được tất cả các đối tượng được giải quyết / bị từ chối được trả về bởi mảng trả chậm, điều này thật xấu xí:

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

Vì chúng tôi đã thông qua một loạt các hoãn lại, sẽ rất tốt để lấy lại một loạt các kết quả. Nó cũng sẽ là tốt đẹp để lấy lại một mảng thực tế thay vì một mảng giả để chúng ta có thể sử dụng các phương thức như Array.sort().

Dưới đây là một giải pháp lấy cảm hứng từ when.js 's when.all()phương pháp mà địa chỉ những vấn đề này:

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

Bây giờ bạn có thể chỉ cần chuyển vào một loạt các lời hứa / trì hoãn và nhận lại một loạt các đối tượng được giải quyết / bị từ chối trong cuộc gọi lại của bạn, như vậy:

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

Nếu bạn đang sử dụng phiên bản ES6 của javascript Có một toán tử trải (...) chuyển đổi mảng các đối tượng thành các đối số được phân tách bằng dấu phẩy.

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

Tìm hiểu thêm về toán tử lây lan ES6 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Siverse_operator tìm tại đây

mở rộng khi với mã này:

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