javascript - jQuery.when() 未按预期工作

Question

我有一系列异步操作，其响应必须同步才能运行最终操作。我使用 Deferred 对象以及 when() 和 done() 方法来实现此目的，但由于某种原因，最终操作在调用第一个 resolve() 响应时，done() 内的内容始终会执行。

这是我的代码，剪短一点以使其更清晰:

       // Central function that creates a Deferred object and returns a
       // Promise from it. when the passed request is done, 
       // the Deferred is resolved
       var getData = function(url, successFunction) {
            var deferred = $.Deferred();
            $.ajax({
                url: url,
                method: 'get',
                dataType: 'json'
            }).done(function(p) {
                successFunction(p);
                deferred.resolve(p);
            }).fail(function(p){
                deferred.reject(p);
            });
            return deferred.promise();
        };

        // Success actions to be called for each asynchronous request

        var populateDestinations = function(data) {
            // synchronous actions on DOM
        };

        var populateTaxes = function(data) {
            // synchronous actions on DOM
        };

        var populatePayment = function(data) {
            // synchronous actions on DOM
        };


        // Actions that return a Promise to control the resolution of 
        // all the deferred objects

        var getCustomerDestinations = function(customerId) {
            var url = $modal.data('url_destinations') + customerId;
            return getData(url, populateDestinations);
        };

        var getCustomerTaxes = function(customerId) {
            var url = $modal.data('url_taxes') + customerId;
            return getData(url, populateTaxes);
        };

        var getCustomerPayment = function(customerId) {
            var url = $modal.data('url_payment') + customerId;
            return getData(url, populatePayment);
        };

        var populateFields = function() {
            // final actions
        };


        $.when(getCustomerDestinations(customer_id),
                getCustomerTaxes(customer_id),
                getCustomerPayment(customer_id))
        .done(function(){

             populateFields();

        });

populateFields() 每当“ promise ”函数之一被解析时就会被调用，而不是在所有函数被解析时调用。

知道我做错了什么吗？也许我还没有掌握Deferred对象的概念。

Answer 1

您确实不需要使用任何延迟对象来跟踪 ajax 调用，相反，您可以在 $.when() 中使用从 $.ajax 返回的 Promise 对象.

JQUERY 代码:

var getData = function(url, successFunction) {
        return $.ajax({
            url: url,
            method: 'get',
            dataType: 'json'
        }).then(function(p) {
            successFunction(p);
        },function(p){
            //process error using error callback, 
            //just like success callbacks
        });
    };

为了处理单个ajax调用，您可以使用.then()而不是.done()和.fail()，因为它们不会返回任何与 .then() 不同的 Promise 对象来跟踪 .when() 中的相同对象。

其余代码将按原样运行。

jQuery 论坛的说法:

As of jQuery 1.8, the deferred.then() method returns a new promise that can filter the status and values of a deferred through a function, replacing the now-deprecated deferred.pipe() method. The doneFilter and failFilter functions filter the original deferred's resolved / rejected status and values. The progressFilter function filters any calls to the original deferred's notify or notifyWith methods. These filter functions can return a new value to be passed along to the promise's .done() or .fail() callbacks, or they can return another observable object (Deferred, Promise, etc) which will pass its resolved / rejected status and values to the promise's callbacks.

引用链接:

• http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
• http://api.jquery.com/deferred.then/