8

For example I have a function:

var f1 = function(arg) {
    var a;
    $.ajax({
        ...
        success: function(data) {
            a = f2(data);
            //return a;
        }
    });
    //return a;
}

var f3 = function() {
    a = f1(arg);
}

How can I return a after AJAX get data in f1?

DrXCheng
  • 3,992
  • 11
  • 49
  • 72

4 Answers4

16

You can't return the result of your ajax request since the request is asynchronous (and synchronous ajax requests are a terrible idea).

Your best bet will be to pass your own callback into f1

var f1 = function(arg, callback) {
    $.ajax({
        success: function(data) {
            callback(data);
        }
    });
}

Then you'd call f1 like this:

f1(arg, function(data) { 
           var a = f2(data);
           alert(a);
        }
 );
Adam Rackis
  • 82,527
  • 56
  • 270
  • 393
  • 2
    What does f2 represent? maybe the callback? – Rodent Dec 22 '15 at 15:03
  • It's ok, this explains it: http://stackoverflow.com/questions/14754619/jquery-ajax-success-callback-function-definition – Rodent Dec 22 '15 at 15:08
  • I know in c# you have the async and await commands with Tasks. I do not think you can do this in JS. If you can, either do the callback like the other people say on here. However, if you use webpack or some ES(whatever it is at now) compiler, then you can use promises. This is a great FREE resource for a lot of the new stuff in ES(6) http://exploringjs.com/es6/ch_promises.html – Christian4423 Apr 28 '17 at 15:46
1

Short, easy answer: you can't.

You could make a a global, but you're subject to timing issues.

Better to either:

  1. Pass in a callback to run in the Ajax success, or
  2. Use jQuery's .when/.then construct, or
  3. Just do the work in the callback.
  4. (Yeah, you could make the call synchronous. Please don't.)
Dave Newton
  • 158,873
  • 26
  • 254
  • 302
-1

The easiest way to do this is to make the ajax call synchronous. Meaning in your f1 function setup the ajax call with async: false so that the function doesn't move on until the call is completed and the data returned.

spinon
  • 10,760
  • 5
  • 41
  • 59
-1

You seem to need to make the ajax call synchronous. You can do that like this:

$.ajax({
  ...
  async: false,
  success: ...
});
return a;

This way the JS execution will pause until the call returns and the success function runs.

Of course there is the issue of sync calls. It's best if you refactor your code so that you do what you need to do with the a variable in the success callback.

Building on this idea, suppose your f3 function was something like this:

var f3 = function() {
  a = f1(arg);
  alert(a); //i.e. "do something" with "a"
}

You could do this instead:

var f3 = function() {
  f1(arg);
}
var f3_callback = function(a) {
  alert(a); //i.e. "do something" with "a"
}

So, your success function would look like this:

success: function(data) {
  a = f2(data);
  f3_callback(a);
}

I hope this is clear!

cambraca
  • 27,014
  • 16
  • 68
  • 99