jQuery 递归 AJAX 调用承诺

Question

我仍在试图弄清楚如何在递归 AJAX 调用中使用 jQuery 延迟对象。我有这样的代码

function request(page, items){    

    //building the AJAX return value for JSFiddle dummy AJAX endpoint
    var ret = {
        totalPage: 10,
        currentPage: page,
        items: []
    };
    for (var i = page; i < (page + 5); i++){
        ret.items.push(i);
    }

    //calling the AJAX
    $.ajax({
        url: '/echo/json/',
        method: 'POST',
        dataType: 'json',
        data: {
            delay: 1,
            json: JSON.stringify(ret)
        },
        success: function(data){
            if (data.currentPage <= data.totalPage){
                var filtered = data.items.filter(function(el){
                    return el % 2 == 1;
                });
                var newitems = items.concat(filtered);
                console.dir(newitems);
                request(data.currentPage + 1, newitems);
            } else {
                console.dir(items);
                //resolve all item
            }
        }
    });
}

function requestAll(){
    request(1, []);
    //should return a promise tha contains all items
}

这是 JSFiddle http://jsfiddle.net/petrabarus/BHswy/

我知道如何在单个 AJAX 调用中使用 Promise，但我不知道如何在递归 AJAX 调用中使用它。我想以类似于下面的方式调用requestAll 函数

var promise = requestAll();
promise.done(function(items){
    console.dir(items);
});

我该怎么做？

Answer 1

如果您想使用 Promise，则不应使用 success 参数。相反，您想return 一个承诺，并且您想使用then 将一个承诺的结果转换成不同的东西，甚至可能是另一个承诺。

function request(page) {    
    …
    // return the AJAX promise
    return $.ajax({
        url: '/echo/json/',
        method: 'POST',
        dataType: 'json',
        data: {
            delay: 1,
            json: JSON.stringify(ret)
        }
    });
}

function requestOddsFrom(page, items) {
    return request(page).then(function(data){
        if (data.currentPage > data.totalPage) {
            return items;
        } else {
            var filtered = data.items.filter(function(el){ return el%2 == 1; });
            return requestOddsFrom(data.currentPage + 1, items.concat(filtered));
        }
    });
}

function requestAll(){
    return requestOddsFrom(1, []);
}

requestAll().then(function(items) {
    console.dir(items);
});

Answer 2

由于您已经一个接一个地对 Ajax 操作进行排序，而无需完全重构您的代码，您可以只使用在最后一次 Ajax 调用时解决的延迟：

function request(page, items, defer){    

    //building the AJAX return value for JSFiddle dummy AJAX endpoint
    var ret = {
        totalPage: 10,
        currentPage: page,
        items: []
    };
    for (var i = page; i < (page + 5); i++){
        ret.items.push(i);
    }

    //calling the AJAX
    $.ajax({
        url: '/echo/json/',
        method: 'POST',
        dataType: 'json',
        data: {
            delay: 1,
            json: JSON.stringify(ret)
        },
        success: function(data){
            if (data.currentPage <= data.totalPage){
                var filtered = data.items.filter(function(el){
                    return el % 2 == 1;
                });
                var newitems = items.concat(filtered);
                console.dir(newitems);
                request(data.currentPage + 1, newitems, defer);
            } else {
                console.dir(items);
                //resolve the deferred
                defer.resolve(items);
            }
        }
    });
}

function requestAll(){
    var deferred = jQuery.Deferred();
    request(1, [], deferred);
    return deferred.promise();
}

requestAll().done(function(items) {
    // all ajax calls are done
});

---

好的，在学习了很多新的 Promise 之后，这是一个使用 Promise 链接的完整 Promise 版本（从 .then() 处理程序返回一个 Promise）。从 Benji 的实现中借用和学习的概念，但组织方式略有不同，并为学习添加了注释（如果没有 cmets 和虚拟 Ajax 调用的东西，它实际上会很短）：

function requestPages(startPage, endPage) {

    function request(page, items){    
        // building the AJAX return value for 
        // JSFiddle dummy AJAX endpoint
        var ret = {
            currentPage: page,
            items: []
        };
        for (var i = page; i < (page + 5); i++){
            ret.items.push(i);
        }

        // Do Ajax call, return its promise
        return $.ajax({
            url: '/echo/json/',
            method: 'POST',
            dataType: 'json',
            data: {
                delay: 1,
                json: JSON.stringify(ret)
            }
        }).then(function(data) {
            // mock filter here to give us just odd values
            var filtered = data.items.filter(function(el){
                return el % 2 == 1;
            });
            // add these items to the ones we have so far
            items = items.concat(filtered);

            // if we have more pages to go, then do the next one
            if (page < endPage){
                // Advance the currentPage, call function to process it and
                // return a new promise that will be chained back to the 
                // promise that was originally returned by requestPages()
                return request(page + 1, items);
            } else {
                // Finish our iteration and 
                // return the accumulated items.
                // This will propagate back through 
                // all the other promises to the original promise
                // that requestPages() returned
                return(items);
            }
        });
    }    

    // call the first request and return it's promise    
    return request(startPage, []);
}

// request pages 1 through 10 inclusive
requestPages(1, 10).done(function(items) {
    // all ajax calls are done
    console.log(items);
});

正在工作的 jsFiddle：http://jsfiddle.net/jfriend00/pr5z9/（请耐心等待，执行 10 个 Ajax 调用需要 10 秒，每个调用需要 1 秒）。

我注意到这个版本的一个问题是，因为它只使用$.ajax() 创建的promise，所以代码不能执行.notify() 来触发进度通知。我发现我想在每个 Ajax 调用完成时触发最初返回的 Promise 的进度通知，但是如果没有创建我自己的 Deferred，我不能这样做，因为你不能在 Promise 上执行 .notify()，只能在a 延期。我不知道如何解决这个问题并保持 Benji 不创建/解决您自己的 deferred 的架构。