Вызов функций закрытия после запуска ajax

Question

Я новичок в шаблоне модуля и закрытии в javascript. Я пытаюсь создать модуль, который получает данные JSON, чтобы я мог отображать его на своей веб-странице.

var EmailLogs = (function(){ 

    var emailLogs = []; 
    var config = {}; 

    function init(options){ 
     for(var prop in options) { 
      if(options.hasOwnProperty(prop)){ 
       config[prop] = options[prop]; 
      } 
     } 

     setEmailLogs(); 
    } 

    function setEmailLogs(){ 
     $.ajax({ 
      type: "POST", 
      headers : { "cache-control": "no-cache" }, 
      url: "../../ajax/adminGetEmailLogs.php", 
      data: {options: JSON.stringify(config)}, 
      dataType: 'json', 
      success: function(values){ 
       if(values.success) 
       { 
        emailLogs = values.emailLogs; 
       } 
      } 
     }); 
    } 

    function getEmailLogs(){ 
     return emailLogs; 
    } 

    return{ 
     init: init, 
     getEmailLogs: getEmailLogs, 
    } 

})(); 

var options = { 
     sData : [ 
      'email_id' 
     ], 
     filters : { 
      user_id : 44860, 
     } 
    } 

EmailLogs.init(options); 
console.log(EmailLogs.getEmailLogs()); 

Я пытаюсь запустить вызов ajax при запуске init. Затем я ищу, чтобы отобразить переменную emailLogs. Я предполагаю, что мой аякс выполняется async, поэтому я не могу получить свои переменные после. Как я могу убедиться, что setEmailLogs() запущен до запуска getEmailLogs().

Answer 1

$.ajax() реализует интерфейс Promise и возвращает объект отсроченного, see the jQuery docs

The jqXHR объекты, возвращаемый $ .ajax() на JQuery 1.5 реализуют интерфейс Promise, давая им все свойства, методы, и поведение Promise (см. раздел «Отложенный объект» для получения дополнительной информации).

Это означает, что вы можете использовать интерфейс обещаний, чтобы убедиться, что нужный метод запускается после завершения $.ajax().

Измените свой код, чтобы использовать интерфейс обещаний. В основном $.ajax() возвращает вам обещание, что оно будет выполнено. Затем вы можете подключить следующий метод для выполнения, как только обещание будет выполнено. Вы часто видите образцы, как этого СЦЕПЛЕНИЕ нескольких обещаний (в псевдо-код):

doAjaxRequest() 
    .then(doSomethingElse) 
    .then(doAnotherSomethingElse) 

Таким образом, вы можете написать довольно чистый код асинхронной, как oppossed в убежище много обратных вызовов, ссылающихся друг друга.

The documentation for Q promises имеет несколько хороших примеров, которые объясняют, как работают обещания.

Я изменил свой фрагмент кода, чтобы использует обещания:

var EmailLogs = (function(){ 

    var emailLogs = []; 
    var config = {}; 

    function init(options){ 
     for(var prop in options) { 
      if(options.hasOwnProperty(prop)){ 
       config[prop] = options[prop]; 
      } 
     } 

     setEmailLogs().done(function(values) { 
       if(values.success) 
       { 
        console.log(values.emailLogs) 
       } 
      }); 
    } 

    function setEmailLogs(){ 
     return $.ajax({ 
      type: "POST", 
      headers : { "cache-control": "no-cache" }, 
      url: "../../ajax/adminGetEmailLogs.php", 
      data: {options: JSON.stringify(config)}, 
      dataType: 'json' 
     }); 
    } 

    return{ 
     init: init, 
     getEmailLogs: getEmailLogs, 
    } 

})(); 

var options = { 
     sData : [ 
      'email_id' 
     ], 
     filters : { 
      user_id : 44860, 
     } 
    } 

EmailLogs.init(options);