javascript - 使用 ASYNC AJAX 调用处理 Deferrred

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

我想做的是为此函数创建一个延迟对象，以便我知道数据刷新何时完全完成。我知道我可以使用 $.when 将它们链接在一起，但我希望这两个 AJAX 调用独立运行并且我不关心一个是否先于另一个完成。

我已经在上面标记了我希望每件作品解决的地方。我只是不确定如何完成此操作。

我的最终目标是这样的调用:

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

Answer 1

你需要做的主要事情是:

• 返回由 $.when(partial1, partial2) 生成的复合 promise
• 在链接到外部 service.getSettings()
的 .then() 中生成(并返回) promise

您可能还想使部分失败可观察到，至少为了调试。

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