如何遍歷多個 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() 回調更可取，因為它仍然允許請求並行執行，這可能會更快（盡管這在某種程度上取決於服務器，但這是一個單獨的問題）。