0

I have this,

  var JOHNNY = (function()
    {
        var module = {};
        function getData(id, callback){
                var xhr = new XMLHttpRequest();
                var url = "http://someurl/api/5";

                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && (xhr.status == 200)) {
                        callback(xhr.response);
                    }
                };

                xhr.open("GET", url, true);
                xhr.responseType = 'json';
                xhr.send(null);

        }
        function myCallBack(data){
            return data;  //console.log works;
        }
        module.getStuff=function(id){
            return getData(5, myCallBack);  //just hardcoded id here
        }
        return module;
    })();

Data is returned. I can step through it, but as soon as I run it in the console:

JOHNNY.getStuff(5);
undefined

never get anything else (I'm in the console.) If I change the return in the callback to console.log(data), I get the data, so I know the url is good.

Due to the async nature of the call, I put a callback. But I am also trying to follow an "Exports" pattern variation of the Module pattern.

How do I get the data from the callback? I've seen lots of examples when not using the Exports variation, but nothing else. For example, this, Javascript module pattern with Ajax callback. This one was never answered, Returning data resolved by XMLHttpRequest with module pattern function and I evidently cannot understand this one, Javascript module pattern, ajax functions callbacks.

I can get the data if I do this,

function myCallBack(data){
    module.test = data;
}

and then,

JOHNNY.test;

But I don't know if that's the right way or not. Plus, how does this work when module has already been returned?

I'm not using jQuery (please no jQuery response), just straight JavaScript.

Edit: I was hoping to fix this without Promises. I do not understand why the callback does not fix the problem.

Community
  • 1
  • 1
johnny
  • 19,272
  • 52
  • 157
  • 259
  • You can not return from a asynchronous call. You should look into promises. – epascarello Mar 27 '17 at 21:45
  • http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call – epascarello Mar 27 '17 at 21:47
  • I was going to but I was hoping to know how to do it without them first, if it is possible. – johnny Mar 27 '17 at 21:47
  • 1
    There is no way to return. It is like ordering a pizza for delivery and having it be there as soon as you hang up. Not possible. – epascarello Mar 27 '17 at 21:48
  • Then why does everyone say to use a callback? I don't understand. – johnny Mar 27 '17 at 21:49
  • The callback executes the code in the next step. It fires when the code is done. It does not pause the code after it. When the callback has run, whatever the logic that set it has been done long long ago. – epascarello Mar 27 '17 at 21:50
  • I understand that part, but if I put return in my callback, why isn't the data returned when the callback is called? – johnny Mar 27 '17 at 21:51
  • 1
    Because that code has already been done. Want you want is for the pizza to come through the phone. Problem is it needs to be delivered. So you hang up the phone and than you wait for the doorbell to ring. Problem is there is no wait() in javascript so there is everything keeps running. So that return statement does NOTHING at all. You are returning to a phone that was hung up a long time ago. – epascarello Mar 27 '17 at 21:51
  • How does jQuery overcome this? Didn't it do it correctly before Promises were available? – johnny Mar 27 '17 at 21:53
  • You could not return with jQuery. – epascarello Mar 27 '17 at 21:54
  • I supposed I can write to the DOM in the callback. Or, as you said, use Promises. Thanks for your guidance. I'll work on it. – johnny Mar 27 '17 at 22:00

0 Answers0