0

I have a few functions that grab data using ajax and I can then get the result data from outside the function when needed.

Here is one example:

function myfunction() {

    jQuery.ajax({
        url: someurl
        method: 'GET',
        async: false,
        success: function(result) {
            myresult = result;
        }
    });

    return myresult;
};

And this from outside I get the data like this:

myvar = myfunction();

Doing it this way I am able to get the data outside the function.

I have searched google and stackoverflow and I still can't understand it so I thought adding a function that I'm already using might help me understand better how to do this.

How can I convert this code so that when I set async to true I'm able to get the data from outside the function?

  • 1
    Google: "javascript callback" or "javascript promise" – Stephan Bijzitter Dec 06 '16 at 21:13
  • You should avoid using async false. It has also been removed in jQuery 3x. You should instead use either the promise callback or the callbacks provided with the ajax methods and stick with the paradigm. http://learn.jquery.com/ajax/key-concepts/ – Taplar Dec 06 '16 at 21:25

1 Answers1

0

How can I convert this code so that when I set async to true I'm able to get the data from outside the function?

Simple answer, don't. You're approaching the problem in the wrong way.

Instead of trying to get data available outside the function, you could provide a callback function which the data should be passed to:

function myfunction(callback) {
    $.ajax({
        url: someurl
        method: 'GET',
        success: callback
    });
};

myfunction(function(data) {
    // work with the data retrieved from the async request here...
    console.log(data);
});

Note: this pattern is a little redundant in this example as you could just give the anonymous function directly to the success property. In a real scenario you'd probably want to execute some actual generic logic in the success handler before calling the provided callback function.

Alternatively you could return the deferred object from the jQuery AJAX request and then use a done() handler to be executed when the object is resolved:

function myfunction() {
    return $.ajax({
        url: someurl
        method: 'GET'
    });
};

myfunction().done(function(data) {
    // work with the data retrieved from the async request here...
    console.log(data);
});

In either case the logic to follow is that the data from the request should be provided to the required function instead of being made globally available.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • Can I still pass the data to a variable like ... for example: var myvar = myfunction().done(function(data) { ..... ? –  Dec 06 '16 at 21:24
  • 1
    No, myvar in that case would be the promise. You can't think in terms of procedural logic when it comes to asynchronous requests. – Taplar Dec 06 '16 at 21:26
  • So, I have to use whatever code or assigning variables etc always inside myfunction().done... ? Its so different to the other way I find it very alien :o/ –  Dec 06 '16 at 21:45