我仍在尝试弄清楚如何在递归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);
});
我该怎么做?
答案 0 :(得分:14)
如果您想使用promises,则不应使用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);
});
答案 1 :(得分:1)
由于您已经一个接一个地对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 chaining(从.then()
处理程序返回一个promise)。从Benji的实现中借鉴和学习的概念,但这有点不同,并且对学习进行了评论(如果没有注释,没有虚拟的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()
创建的承诺,所以代码无法执行.notify()
来触发进度通知。我发现我想在每个Ajax调用完成时触发最初返回的promise的进度通知,但是没有创建我自己的Deferred,我无法做到这一点因为你不能做.notify()
在承诺上,只在延期。我不确定如何解决这个问题,并坚持Benji的架构,即不创建/解决你自己的延迟。