首先,您必须决定是要并行处理三个 ajax 调用(同时运行,总运行时间更短),还是按顺序处理一个 ajax 调用运行、完成然后启动下一个ajax调用。这是一个关键的设计决策,会影响您执行此操作的方式。
当您使用$.when() 时,您将并行启动所有三个 ajax 调用。如果仅在所有结果都完成后检查结果,您仍然可以按特定顺序处理结果(因为只有当所有结果都可用并且它们将按请求的顺序可用时才会处理它们)。但是,当这样做时,所有的 ajax 调用最初都会被立即发送。这将为您提供更好的端到端时间,因此如果这对于请求类型是可行的,这通常是一种更好的方法。
为此,您可以将所拥有的内容重组为如下所示:
并行运行
var files = [
'url1', 'url2', 'url3'
];
$.when($.ajax(files[0]),$.ajax(files[1]),$.ajax(files[2])).done(function(a1, a2, a3) {
var results = [];
results.push(a1[0]);
results.push(a2[0]);
results.push(a3[0]);
console.log("got all results")
});
因为您一直在等待 $.when() 的 .done() 处理程序被调用,所以所有 ajax 结果都立即准备就绪,并且它们由 $.when() 按请求的顺序呈现(不管实际上是哪个首先完成),因此您可以尽快获得结果,并且它们会以可预测的顺序呈现。
注意,我还将 results 数组的定义移到了 $.when() done 处理程序中,因为这是您知道数据实际有效的唯一地方(出于时间原因)。
并行运行 - 迭代任意长度数组
如果您有一个更长的数组,您可能会发现使用 .map() 之类的东西遍历您的数组以循环处理它们而不是单独列出它们会更好:
var files = [
'url1', 'url2', 'url3', 'url4', 'url5', 'url6', 'url7'
];
$.when.apply($, files.map(function(url) {
return $.ajax(url);
})).done(function() {
var results = [];
// there will be one argument passed to this callback for each ajax call
// each argument is of this form [data, statusText, jqXHR]
for (var i = 0; i < arguments.length; i++) {
results.push(arguments[i][0]);
}
// all data is now in the results array in order
});
对 Ajax 调用进行排序
另一方面,如果您确实想要对 ajax 调用进行排序,以便第二个调用在第一个调用完成之前不会开始(如果第二个 ajax 调用需要来自第一个 ajax 调用的结果,则可能需要这样做)为了知道要请求什么或做什么),那么您需要一个完全不同的设计模式,$.when() 根本不是要走的路(它只做并行请求)。在这种情况下,您可能只想用x.then().then() 链接您的结果,然后您可以按照您要求的顺序输出日志语句。
$.ajax(files[0]).then(function(data0) {
console.log("step 1.0");
return $.ajax(files[1]);
}).then(function(data1) {
console.log("step 1.1");
return $.ajax(files[2]);
}).done(function(data2) {
console.log("step 1.2");
// all the ajax calls are done here
console.log("step 2");
});
控制台输出:
step 1.0
step 1.1
step 1.2
step 2
如果您的文件数组较长,也可以将这个结构放入一个循环中以自动运行它以进行 N 次连续的 ajax 调用。虽然您可以在进入 results 数组时收集结果,但通常按顺序完成的原因是先前的结果被下一个 ajax 调用消耗,因此您通常只需要最终结果。如果您想随时收集结果,您当然可以在每一步将它们推送到results 数组中。
请注意,promise 提供的优势在于您可以对操作进行排序,同时保持在同一顶级嵌套级别,而不会越来越嵌套。
对 Ajax 调用进行排序 - 迭代任意长度数组
以下是循环中的排序:
var files = [
'url1', 'url2', 'url3', 'url4', 'url5', 'url6', 'url7'
];
var results = [];
files.reduce(function(prev, cur, index) {
return prev.then(function(data) {
return $.ajax(cur).then(function(data) {
console.log("step 1." + index);
results.push(data);
});
})
}, $().promise()).done(function() {
// last ajax call done
// all results are in the results array
console.log("step 2.0");
});
控制台输出:
step 1.0
step 1.1
step 1.2
step 1.3
step 1.4
step 1.5
step 1.6
step 2
Array.prototype.reduce() 方法在这里很方便,因为它会在您处理每个单独的数组元素时累积一个值,这是您在为每个数组元素添加 .then() 时需要执行的操作。 .reduce() 迭代以 $().promise() 的空/已解决承诺开始(还有其他方法也可以创建这样的承诺),这只是让我们开始做一些事情 .then() 已经解决了。