javascript - 从函数返回的数据未定义

Question

我在将数据从 ajax 返回到调用者函数时遇到问题。当我 console.loging 它是未定义的。

我相信我的问题是由于 js 是异步的，当我在 console.loging 数据时它还没有准备好。我能做些什么来解决它？

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);
         }
    });
},