如何遍历多个 ajax 请求，然后在一切完成后执行代码？ [复制]

Question

这个问题在这里已经有了答案：

• 等到所有 jQuery Ajax 请求完成？ 22 个答案

让我先说我已经在网上进行了一系列搜索，但似乎无法将其拼凑起来。

要求：使用jQuery:(

单击时，我使用.getJSON调用来获取具有多层的 object。

以下是数据示例：

 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}
    },
]

}

一旦所有这些都完成并且每个 object 都有这个新数据位，然后我想对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

If you capture the Promise (technically a jQuery Deferred object, actually) generated by each AJAX request, and add them to an array, then you can call .when() to execute some code once all of the Promises are resolved. 像这样的东西（未经测试）：

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