Данные, возвращающиеся из функции, не определены

Question

У меня проблема с возвратом данных из ajax в функцию вызывающего абонента. Когда я консолью, это не определено.

Я считаю, что моя проблема возникает из-за того, что js является асинхронным, и когда я консолью, данные из него еще не готовы. Что я могу сделать, чтобы решить эту проблему?

FooFunction: function(userInput){ 

    var fooData = FooFunction2(userInput); 
    console.log(fooData);  // <--- undefined 
}, 

FooFunction2: function(userInput) { 

    $.ajax({ 
     url:'./php/test.php', 
     type:'post', 
     dataType:'json', 
     data:{ 
      fooData: userInput 
     }, 
     success:function(data) { 
      ...manipulating the data... 

      console.log(manipulatedData); // <--- ['foo', 'foo2']; 
      return manipulatedData; 
     } 
    }); 
}, 

Answer 1

вызов Ajax является асинхронной, поэтому возвращение не будет работать. Измените свой код, чтобы использовать обратный вызов, который вызывается при завершении вызова ajax.

Я изменил свой код, чтобы сделать это:

FooFunction: function(userInput){ 
    var callbackfunc = function(ajaxData) 
    { 
     console.log(ajaxData); //ajax is complete! 
    }; 

    this.FooFunction2(userInput, callbackfunc); 
}, 

FooFunction2: function(userInput, callbackfunc) { 

    $.ajax({ 
     url:'./php/test.php', 
     type:'post', 
     dataType:'json', 
     data:{ 
      fooData: userInput 
     }, 
     success:function(data) { 
      ...manipulating the data... 

      console.log(manipulatedData); // <--- ['foo', 'foo2']; 
      callbackfunc(manipulatedData); 
     } 
    }); 
}, 

Answer 2

FooFunction2 является свойством объекта использования this.FooFunction2

и вы не можете вернуться из асинхронных методов. либо выполнить синхронный вызов ajax, либо обратный вызов proivde.

FooFunction: function(userInput){ 

    var fooData = this.FooFunction2(userInput); 
    console.log(fooData);  // <--- undefined 
}, 

Модифицированный код

FooFunction: function(userInput){ 

    this.FooFunction2(userInput, function(fooData){ 
      console.log(fooData);  // <--- undefined 
    }); 

}, 

FooFunction2: function(userInput, cb) { 

    $.ajax({ 
     url:'./php/test.php', 
     type:'post', 
     dataType:'json', 
     data:{ 
      fooData: userInput 
     }, 
     success:function(data) { 
      ...manipulating the data... 

      console.log(manipulatedData); // <--- ['foo', 'foo2']; 
      cb(manipulatedData); 
     } 
    }); 
},