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