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)
生成（并返回）.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
});

句柄延迟使用ASYNC AJAX调用

2 个答案: