如何循环遍历多个 ajax 请求，然后在一切完成后执行代码？

Question

首先让我说我已经在网上进行了一系列搜索，但似乎无法拼凑起来。要求：使用 jQuery :(单击时，我使用.getJSON调用来获取具有多个层的对象。下面是一个数据示例： myObj = {title: 'some name',items: [    {        name: 'item-1',        url: '/item-1'    },    {        name: 'item-2',        url: '/item-4'    },    {        name: 'item-3',        url: '/item-4'    },    {        name: 'item-4',        url: '/item-4'    },]}我想遍历所有的 url，并对.ajax它们调用一个操作，然后将我得到的新数据存储在它们各自的对象中。它看起来像这样：myObj = {title: 'some name',items: [    {        name: 'item-1',        url: '/item-1',        properties: {//whole new set of data from url}    },    {        name: 'item-2',        url: '/item-4',        properties: {//whole new set of data from url}    },    {        name: 'item-3',        url: '/item-4',        properties: {//whole new set of data from url}    },    {        name: 'item-4',        url: '/item-4',        properties: {//whole new set of data from url}    },]}一旦所有这些都完成并且每个对象都有这个新的数据位，然后我想对 做一些事情myObj，比如将它渲染到 jquery 模板（呃），但新数据必须在每个项目的内部。这是我到目前为止所拥有的：var myItems = myObj.items;$(myItems).each(function(index, item) {          var itemUrl = '/somestuff/' + item.url + '.js';      $.getJSON(itemUrl).done(function(itemData) {        item.data = itemData;                          });    }).promise().done(function() {//render data to template})我遇到的唯一问题是，有时item.properties模板渲染时数据还不存在 ( )，因此无法渲染未定义。我试过链接不成功.done()，现在遇到了使用.when()，但不知道如何编写代码行以使其.when()正常工作。任何帮助表示赞赏，我很乐意澄清细节。

Answer 1

如果您捕获每个 AJAX 请求生成的 Promise（技术上讲是一个 jQuery Deferred 对象），并将它们添加到一个数组中，那么您可以.when()在所有 Promise 被解析后调用以执行一些代码。像这样的东西（未经测试）：

var myItems = myObj.items;

var promises = [];

$(myItems).each(function(index, item) {    

  var itemUrl = '/somestuff/' + item.url + '.js';

  var p = $.getJSON(itemUrl);

  p.then(function(itemData) {

    item.data = itemData;

    return itemData;

  });

  promises.push(p);

});

$.when.apply($, promises).then(function() { //render data to template...

这可能比链接 done() 回调更可取，因为它仍然允许请求并行执行，这可能会更快（尽管这在某种程度上取决于服务器，但这是一个单独的问题）。