jQuery，带有URL数组的$ .ajax

jQuery，带有URL数组的$ .ajax

首先，您必须决定是要并行处理三个ajax调用（同时运行所有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")});

因为您一直在等待的

.done()

处理程序

$.when()

被调用，所以所有的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调用需要第一个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.0step 1.1step 1.2step 2

如果文件数组较长，也可以将该结构放入循环中，以自动运行N次连续的Ajax调用。尽管您可以在进入

results

数组时收集结果，但通常顺序执行 *** 作的原因是先前的结果被下一个ajax调用占用了，因此您通常只需要最终结果。如果您想随时收集结果，则可以

results

在每一步将它们推入阵列。

请注意，这里承诺的优势在于，您可以在保持相同的顶层嵌套且不会越来越嵌套的情况下对 *** 作进行排序。

---

排序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.0step 1.1step 1.2step 1.3step 1.4step 1.5step 1.6step 2

该

Array.prototype.reduce()

方法在这里很容易使用，因为在处理每个单独的数组元素时它会累积一个值，这是在

.then()

为每个数组元素添加时需要执行的 *** 作。该

.reduce()

迭代开始与空/解决承诺

$().promise()

（也有其他的方式来还可以创建这样的承诺），它只是给我们的东西，开始做

.then()

对已经解决。