0

I am unable to figure out why this event handler will not return:

function getJSON () {
    var request = new XMLHttpRequest();
    request.open('GET', 'http://quotes.rest/qod.json', true); 

    request.onreadystatechange = function () {
        if (request.status === 200 && request.readyState === XMLHttpRequest.DONE) {
        return 1;
        }
    }   
    request.send(null);
};

If I replace the return statement with a console.log(), it fires, so I know that the conditions of the if statement are met.

UPDATE:

XMLHttpRequest.onreadystatechange

An EventHandler that is called whenever the readyState attribute changes. The callback is called from the user interface thread. The XMLHttpRequest.onreadystatechange property contains the event handler to be called when the readystatechange event is fired, that is every time the readyState property of the XMLHttpRequest changes.

I am making a call to API and expect the return statement in the eventhandler to fire once the server returns status 200 and the status of readyState equals 4 (DONE) Update 2: It is not a duplicate because l am not asking how to return call back response, but simply why the return statement fails to run

Will
  • 521
  • 1
  • 6
  • 18
  • You're working with an async function here, where and when are you expecting the return? Maybe a callback function instead of a return is a better choice. As is, your code will `return 1` to whatever calls `request.onreadystatechange()`, but I doubt you're calling that manually. – Alex Griffis Jul 23 '17 at 21:39
  • return from callback functions usually makes little sense (in this case no sense) and can be used to prevent default behavior of the event fired. Example of proper use: `click me` (cancel transition to `link.html`). In the case of `onreaadystatechange` you have nothing to cancel. The request is already sent and response received. ;) – Alex Kudryashev Jul 23 '17 at 21:53
  • @AlexGriffis My understanding is that request.onreadystatechange() will be called when ReadyState attribute changes and it meets the criteria of the if statement. In this instance I expect the return statement to return 1. – Will Jul 23 '17 at 22:06
  • Hi @Sandbagger, Let us know what you would like to do with the `return 1` once you have it and we can help you rewrite your code. Check out the [question](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call?noredirect=1&lq=1) this has been marked a dup of. Your problem is an important and common one. It was hard for me to learn that there is a different way of doing things for async functions like this, but you will avoid (these) headaches once you learn the async way. – Alex Griffis Jul 23 '17 at 22:24
  • @AlexGriffis Hi, at this point in time I am just trying to figure out why when I call getJSON(), the return statement for request.onreadystatechange callback fails to yeild 1. I am not wanting to do anything with return 1 as such - I am just trying to understand why it doesn't seem to yield whatever return statement I put there. For arguments sake, if I replaced return 1 with return XMLHttpRequest.response (request.response in the above code) conceivably I could use what is returned in the response - convert the string into JSON object by parsing it for example. – Will Jul 24 '17 at 06:24
  • @Sandbagger Oh well if you really just want to see the `1` return then call the function and log it `console.log(request.onreadystatechange())` works fine in this [fiddle](https://jsfiddle.net/nryp9hnq/1/) – Alex Griffis Jul 24 '17 at 07:41
  • @AlexGriffis Thanks. Why does my orginal code return undefined as opposed to 1? – Will Jul 24 '17 at 17:56
  • Well, if you call `request.onreadystatechange()` but leave the conditional intact, you'll get `undefined` because there is no return should the conditional fail (and it will on this manual call because the request isn't `200/DONE`). On the other hand if you allow the code to run as it should, when the request fires it will return `1`, but you won't be able to collect or see that return anywhere. – Alex Griffis Jul 24 '17 at 18:55
  • @AlexGriffis Doesn't request.onreadystatechange() get called each time there is a state change in request.readyState? Thereby one of the calls will reach the return line once it meets the conditionals? – Will Jul 24 '17 at 19:08
  • You're right, it sure will reach the return, but you aren't storing the result anywhere; `request.onreadystatechange()` is called internally on state change, and whatever calls it gets that `1`, but since you aren't the one calling it, you can't see the return! – Alex Griffis Jul 24 '17 at 19:24
  • @AlexGriffis ah thats the logical step I failed to grasp! Thank you. – Will Jul 24 '17 at 19:59

1 Answers1

0

It is not clear from your question where the callback function is. The callback need to be passed to the function you are expecting to use it. So, for example getJSON should accept a callBack as an argument ( function getJSON(callBack) { } ), and then return 1; should be replaced by return callBack(1);

user3094755
  • 1,561
  • 16
  • 20