通过ASYNC AJAX调用推迟处理

Question

我有一个类似于以下内容的函数：

function refreshData() {
    service.getSettings().done(function (settings) {
        // DATA 1
        service.getData1(settings).done(function (result) {
            // do something local with result
            // partial resolve 1
        });
        // DATA 2
        var localData = service.getLocalData();
        if (localData.length) {
            service.getData2(settings, localData).done(function (result) {
                // do something local with result
                // partial resolve 2
            });
        } else {
            $('#list').empty();
            // or partial resolve 2
        }
    });
}

我要做的是为此函数创建一个Deferred对象，这样我就知道何时完全完成数据刷新。 我知道我可以将它们与$.when链接在一起，但是我希望两个AJAX调用独立运行，并且我不在乎一个完成在另一个之前。

我已经在上面标记了我要解决的每个问题。 我只是不确定如何做到这一点。

我的最终目标将是这样的电话：

refreshData().done(function() {    
    // hide loader
});

Answer 1

这样的事情怎么样

function refreshData() {
    var def1 = $.Deferred();
    var def2 = $.Deferred();

    service.getSettings().done(function (settings) {
        service.getData1(settings).done(function (result) {
            def1.resolve(result);
        });
        var localData = service.getLocalData();
        if (localData.length) {
            service.getData2(settings, localData).done(function (result) {
                def2.resolve(result);
            });
        } else {
            $('#list').empty();
            def2.resolve();
        }
    });    

    // return aggregated promise
    return $.when(def1, def2);
}


refreshData().done(function(r1, r2) {    
     // hide loader
});

注意：未经测试

Answer 2

您需要做的主要事情是：

• 返回由$.when(partial1, partial2)生成的复合承诺
• 生成（并返回）在链接到外部service.getSettings()的.then()内部保证的承诺.then() service.getSettings()

您可能还希望使局部故障可观察到，至少对于调试而言。

function refreshData() {
    return service.getSettings().then(function (settings) {//note `return` and `.then()`
        var partial1, partial2; // declare two promises

        // utility function make error observable - avoids repetition below
        function handleError(err) {
            console.error(err);
        });

        partial1 = service.getData1(settings).done(function (result) {
            //do something local with result
        }).fail(handleError);//make failure of partial1 observable

        var localData = service.getLocalData();//assume this is synchronous
        if (localData.length) {
            partial2 = service.getData2(settings, localData).done(function (result) {
                //do something local with result
            }).fail(handleError);//make failure of partial2 observable
        } else {
            partial2 = $('#list').empty().promise();//sneaky way to generate a resolved promise
        }

        return $.when(partial1, partial2);//as we are inside a `.then()`, the promise generated here is effectively returned by refreshData().
    });
}

查看代码中的注释

调用如下：

refreshData().done(function() {    
    // hide loader
}).fail(function(err) {
    // indicate failure
});