вернуть данные из вложенного jquery ajax получить запрос

Question

У меня есть 2 JAVASCRIPT API Получить вызовы, которые я делаю с помощью JQUERY. Я хочу добавить HTML, который я создаю во втором вызове DOM.

Первый вызов захватывает некоторые данные. Я просматриваю длину этих данных, делая второй вызов для каждого индекса.

В течение второго вызова я создаю HTMLContent вверх.

Как только все вызовы завершены, я добавляю HTMLContent в DOM.

Я пытаюсь вернуть HTMContent обратно в течение первого вызова, так как я хочу только добавить DOM, когда он полностью создан. И вне цикла for, который я создал.

Я знаю, что мог бы добавить сделанное из 2-го звонка, но мне очень хотелось бы знать, как его вернуть.

Я думал, может быть, мне нужно создать обещание, но не уверен, что это поможет, поскольку сфера будет по-прежнему содержаться на второй запрос GET .done Func

Это то, что я до сих пор.

var gallery = (function($){ 

    var init, 
     firstGetCall, 
     secondGetCall, 
     HTMLContent = ''; 

    init = function(){ 
     // Make first call 
     firstGETCall(); 
    }; 

    // Declare firstGETCall func 
    firstGETCall = function(){ 
     $.ajax({ 
      url: 'http://example.com/data.json', 
      type: 'GET', 
      data: { 
       numberOfItems: 10 
      } 
     }) 
     .done(function(data) { 

      // Cycle through each data element 
      for (var i = 0; i < data.length; i++) { 
       // Make second call 
       secondGetCall(data[i]); 
      }; 
     }) 
     .fail(function(error) { 
      console.log(error); 
     }); 
     // I want to append the DOM here with the conplete HTMLContent - built up of 10 x <div><img... elements 
     // However I'm stuck as to how to return the complete HTMLContent 
    }; 

    // Declare secondGetCall func 
    secondGetCall = function(singleData) { 

     $.ajax({ 
      url: 'http://example.com/data-2.json', 
      type: 'GET', 
      data: { 
       type: singleData 
      } 
     }) 
     .done(function(data) { 

      // Build HTMLContent 
      HTMLContent = '<div><img src="' + data.image + ' title="' + data.subTitle + ' alt="Photo"></div>'; 
      // I do not want to append the DOM here 
      // return HTMLContent doesn't work 
     }) 
     .fail(function(error) { 
      console.log(error); 
     }); 
    }; 

    return { 
     init: init 
    }; 

})(jQuery); 


gallery.init(jQuery); 

Answer 1

Первый наиболее важный момент:

Я хочу добавить к DOM здесь ...

В любом случае вы ничего не можете сделать в том месте, где вы положили выше комментария!

Поскольку Ajax работает asynchroneously (если не указано обратное, но это настоятельно не рекомендуется), любое заявление, в том месте, назначить будет выполняться несколько микросекунд после $.ajax запускается, поэтому долгое время, прежде чем строится вся ваша HTML ,

Теперь это, кажется, тоже странно:

Я изо всех сил, чтобы вернуть HTMContent обратно в течение первого вызова

Во-первых, потому что, опять-таки из-за асинхронном режиме, вы не можете ожидать возвращая что-нибудь от .done() вызова Ajax.
Но также потому, что я не понимаю, почему вы хотите «вернуть назад» данные, которые уже доступны на более высоком уровне. На самом деле то, что вам нужно, - это только уведомление, когда оно доступно.

С другой стороны, я полностью согласен, что лучше добавлять HTML в DOM только один раз, чтобы сократить потребление времени.

Для этого, прежде всего, я думаю: Почему бы просто не иметь уникальную серверную функцию, возвращая весь набор необходимых данных, а не два разных?

Однако в случае, если по какой-то причине это действительно невозможно, вы можете заставить вызовы Ajax работать синхронно (но опять же вам следует избегать этого).
В этом случае вы должны:

1. В вашей secondGetCall() функции, слегка изменить инструкцию .done() тела, чтобы добавить новые данные в HTMLContent, а не просто установить его: HTMLContent += '<div>...</div>';.
2. В каждом из двух вызовов Ajax добавьте async: false к объекту Ajax.
3. Запишите заявление, чтобы добавить HTMLContent в DOM в том месте, где вы написали комментарий об этом.