How to make asynchronous function work like a regular one?

Question

I have a code that XMLHttpRequest. It's a object to send request to server and it's asynchronous so when I want to receive the response I need to provide the callback function to onreadystatechange property of this object. And this function is called after response being received:

function send()
{
   XMLHttpRequest req = new...
   req.onreadystatechange = answer;
}

function answer()
{
   //handling the answer...
}

So it's great but I don't want to use new function to handle answer so I do it anonymous:

function send()
{
   XMLHttpRequest req = new...
   req.onreadystatechange = function ()
   {
         //handling the answer...
   };
}

But now i want to use the result of send function in another function for example to display result:

display(send())

So how to make this work? Something like:

function send()
{
   XMLHttpRequest req = new...
   req.onreadystatechange = function ()
   {
         //handling the answer...
         return result; //where result is returned by send function
   };
}

Is there any way to do this so that other JS code will still work while this code will handle the response?

possible duplicate of [simulating a synchronous XmlHttpRequest](http://stackoverflow.com/questions/1809931/simulating-a-synchronous-xmlhttprequest) — Andrew Marshall, Mar 15 '12 at 14:43

score 1 · Accepted Answer · answered Mar 15 '12 at 14:42

With asynchronous functions you need to do it the opposite way. Instead of saying display(send()) you need to sue send(display)

function send(callback)
{
   XMLHttpRequest req = new...
   req.onreadystatechange = function ()
   {
         //handling the answer...
         callback(result);
   };
}

Trying to write display(send()) won't work. The send() function produces a value asynchronously but returns promptly. It can't return the result of the async operation.

score 0 · Answer 2 · answered Mar 15 '12 at 14:43

0

Inside the readystatechange handler, the response is available on req.responseText. You should put your call to display() inside that event handler.

answered Mar 15 '12 at 14:43

bfavaretto

71,580
16
111
150

score 0 · Answer 3 · answered Mar 15 '12 at 14:44

You can use synchronous AJAX call:

XMLHttpRequest req = new...
var result = null;
req.onreadystatechange = function() {
  if (req.readyState == 4) {
    if (req.status == 200) {
       result = req.responseText;
    }
  }
};
req.open('GET', url, false);  //async = false
return result;

But this is a poor practice and not an idiomatic way of working with JavaScript. Quoting Synchronous and asynchronous requests:

Note: You shouldn't use synchronous XMLHttpRequests because, due to the inherently asynchronous nature of networking, there are various ways memory and events can leak when using synchronous requests.

You know how to use callbacks, why not simply:

send(display)

I wouldn't even suggest using synchronous XHR -- [it's a worse than poor practice](http://stackoverflow.com/a/7337091/201952). — josh3736, Mar 15 '12 at 14:48

How to make asynchronous function work like a regular one?

3 Answers3