If you're not using jQuery in your code, this answer is for you

Your code should be something along the lines of this:

function foo() {

    var httpRequest = new XMLHttpRequest();

    httpRequest.open('GET', "/echo/json");

    httpRequest.send();

    return httpRequest.responseText;

}



var result = foo(); // always ends up being 'undefined'

Felix Kling did a fine job writing an answer for people using jQuery for AJAX, I've decided to provide an alternative for people who aren't.

(Note, for those using the new fetch API, Angular or promises I've added another answer below)

What you're facing

This is a short summary of "Explanation of the problem" from the other answer, if you're not sure after reading this, read that.

The A in AJAX stands for asynchronous. That means sending the request (or rather receiving the response) is taken out of the normal execution flow. In your example, .send returns immediately and the next statement, return result;, is executed before the function you passed as success callback was even called.

This means when you're returning, the listener you've defined did not execute yet, which means the value you're returning has not been defined.

Here is a simple analogy

function getFive(){ 

    var a;

    setTimeout(function(){

         a=5;

    },10);

    return a;

}

(Fiddle)

The value of a returned is undefined since the a=5 part has not executed yet. AJAX acts like this, you're returning the value before the server got the chance to tell your browser what that value is.

One possible solution to this problem is to code re-actively , telling your program what to do when the calculation completed.

function onComplete(a){ // When the code completes, do this

    alert(a);

}



function getFive(whenDone){ 

    var a;

    setTimeout(function(){

         a=5;

         whenDone(a);

    },10);

}

This is called CPS. Basically, we're passing getFive an action to perform when it completes, we're telling our code how to react when an event completes (like our AJAX call, or in this case the timeout).

Usage would be:

getFive(onComplete);

Which should alert "5" to the screen. (Fiddle).

Possible solutions

There are basically two ways how to solve this:

1. Make the AJAX call synchronous (lets call it SJAX).


2. Restructure your code to work properly with callbacks.

1. Synchronous AJAX - Don't do it!!

As for synchronous AJAX, don't do it! Felix's answer raises some compelling arguments about why it's a bad idea. To sum it up, it'll freeze the user's browser until the server returns the response and create a very bad user experience. Here is another short summary taken from MDN on why:

XMLHttpRequest supports both synchronous and asynchronous communications. In general, however, asynchronous requests should be preferred to synchronous requests for performance reasons.

In short, synchronous requests block the execution of code... ...this can cause serious issues...

If you have to do it, you can pass a flag: Here is how:

var request = new XMLHttpRequest();

request.open('GET', 'yourURL', false);  // `false` makes the request synchronous

request.send(null);



if (request.status === 200) {// That's HTTP for 'ok'

  console.log(request.responseText);

}

2. Restructure code

Let your function accept a callback. In the example code foo can be made to accept a callback. We'll be telling our code how to react when foo completes.

So:

var result = foo();

// code that depends on `result` goes here

Becomes:

foo(function(result) {

    // code that depends on `result`

});

Here we passed an anonymous function, but we could just as easily pass a reference to an existing function, making it look like:

function myHandler(result) {

    // code that depends on `result`

}

foo(myHandler);

For more details on how this sort of callback design is done, check Felix's answer.

Now, let's define foo itself to act accordingly

function foo(callback) {

    var httpRequest = new XMLHttpRequest();

    httpRequest.onload = function(){ // when the request is loaded

       callback(httpRequest.responseText);// we're calling our method

    };

    httpRequest.open('GET', "/echo/json");

    httpRequest.send();

}

(fiddle)

We have now made our foo function accept an action to run when the AJAX completes successfully, we can extend this further by checking if the response status is not 200 and acting accordingly (create a fail handler and such). Effectively solving our issue.

If you're still having a hard time understanding this read the AJAX getting started guide at MDN.

XMLHttpRequest 2 (first of all read the answers from Benjamin Gruenbaum & Felix Kling)

If you don't use jQuery and want a nice short XMLHttpRequest 2 which works on the modern browsers and also on the mobile browsers I suggest to use it this way:

function ajax(a, b, c){ // URL, callback, just a placeholder

  c = new XMLHttpRequest;

  c.open('GET', a);

  c.onload = b;

  c.send()

}

As you can see:

1. It's shorter than all other functions Listed.


2. The callback is set directly (so no extra unnecessary closures).


3. It uses the new onload (so you don't have to check for readystate && status)


4. There are some other situations which I don't remember that make the XMLHttpRequest 1 annoying.

There are two ways to get the response of this Ajax call (three using the XMLHttpRequest var name):

The simplest:

this.response

Or if for some reason you bind() the callback to a class:

e.target.response

Example:

function callback(e){

  console.log(this.response);

}

ajax('URL', callback);

Or (the above one is better anonymous functions are always a problem):

ajax('URL', function(e){console.log(this.response)});

Nothing easier.

Now some people will probably say that it's better to use onreadystatechange or the even the XMLHttpRequest variable name. That's wrong.

Check out XMLHttpRequest advanced features

It supported all *modern browsers. And I can confirm as I'm using this approach since XMLHttpRequest 2 exists. I never had any type of problem on all browsers I use.

onreadystatechange is only useful if you want to get the headers on state 2.

Using the XMLHttpRequest variable name is another big error as you need to execute the callback inside the onload/oreadystatechange closures else you lost it.

Now if you want something more complex using post and FormData you can easily extend this function:

function x(a, b, e, d, c){ // URL, callback, method, formdata or {key:val},placeholder

  c = new XMLHttpRequest;

  c.open(e||'get', a);

  c.onload = b;

  c.send(d||null)

}

Again ... it's a very short function, but it does get & post.

Examples of usage:

x(url, callback); // By default it's get so no need to set

x(url, callback, 'post', {'key': 'val'}); // No need to set post data

Or pass a full form element (document.getElementsByTagName('form')[0]):

var fd = new FormData(form);

x(url, callback, 'post', fd);

Or set some custom values:

var fd = new FormData();

fd.append('key', 'val')

x(url, callback, 'post', fd);

As you can see I didn't implement sync... it's a bad thing.

Having said that ... why don't do it the easy way?

As mentioned in the comment the use of error && synchronous does completely break the point of the answer. Which is a nice short way to use Ajax in the proper way?

Error handler

function x(a, b, e, d, c){ // URL, callback, method, formdata or {key:val}, placeholder

  c = new XMLHttpRequest;

  c.open(e||'get', a);

  c.onload = b;

  c.onerror = error;

  c.send(d||null)

}



function error(e){

  console.log('--Error--', this.type);

  console.log('this: ', this);

  console.log('Event: ', e)

}

function displayAjax(e){

  console.log(e, this);

}

x('WRONGURL', displayAjax);

In the above script, you have an error handler which is statically defined so it does not compromise the function. The error handler can be used for other functions too.

But to really get out an error the only way is to write a wrong URL in which case every browser throws an error.

Error handlers are maybe useful if you set custom headers, set the responseType to blob array buffer or whatever...

Even if you pass 'POSTAPAPAP' as the method it won't throw an error.

Even if you pass 'fdggdgilfdghfldj' as formdata it won't throw an error.

In the first case the error is inside the displayAjax() under this.statusText as Method not Allowed.

In the second case, it simply works. You have to check at the server side if you passed the right post data.

cross-domain not allowed throws error automatically.

In the error response, there are no error codes.

There is only the this.type which is set to error.

Why add an error handler if you totally have no control over errors?
Most of the errors are returned inside this in the callback function displayAjax().

So: No need for error checks if you're able to copy and paste the URL properly. ;)

PS: As the first test I wrote x('x', displayAjax)..., and it totally got a response...??? So I checked the folder where the HTML is located, and there was a file called 'x.xml'. So even if you forget the extension of your file XMLHttpRequest 2 WILL FIND IT. I LOL'd

Read a file synchronous

Don't do that.

If you want to block the browser for a while load a nice big .txt file synchronous.

function omg(a, c){ // URL

  c = new XMLHttpRequest;

  c.open('GET', a, true);

  c.send();

  return c; // Or c.response

}

Now you can do

 var res = omg('thisIsGonnaBlockThePage.txt');

There is no other way to do this in a non-asynchronous way. (Yeah, with setTimeout loop... but seriously?)

Another point is... if you work with APIs or just your own list's files or whatever you always use different functions for each request...

Only if you have a page where you load always the same XML/JSON or whatever you need only one function. In that case, modify a little the Ajax function and replace b with your special function.

The functions above are for basic use.

If you want to EXTEND the function...

Yes, you can.

I'm using a lot of APIs and one of the first functions I integrate into every HTML page is the first Ajax function in this answer, with GET only...

But you can do a lot of stuff with XMLHttpRequest 2:

I made a download manager (using ranges on both sides with resume, filereader, filesystem), various image resizers converters using canvas, populate web SQL databases with base64images and much more... But in these cases you should create a function only for that purpose... sometimes you need a blob, array buffers, you can set headers, override mimetype and there is a lot more...

But the question here is how to return an Ajax response... (I added an easy way.)

If you're using promises, this answer is for you.

This means AngularJS, jQuery (with deferred), native XHR's replacement (fetch), EmberJS, BackboneJS's save or any node library that returns promises.

Your code should be something along the lines of this:

function foo() {

    var data;

    // or $.get(...).then, or request(...).then, or query(...).then

    fetch("/echo/json").then(function(response){

        data = response.json();

    });

    return data;

}



var result = foo(); // result is always undefined no matter what.

Felix Kling did a fine job writing an answer for people using jQuery with callbacks for AJAX. I have an answer for native XHR. This answer is for generic usage of promises either on the frontend or backend.

The core issue

The JavaScript concurrency model in the browser and on the server with NodeJS/io.js is asynchronous and reactive.

Whenever you call a method that returns a promise, the then handlers are always executed asynchronously - that is, after the code below them that is not in a .then handler.

This means when you're returning data the then handler you've defined did not execute yet. This in turn means that the value you're returning has not been set to the correct value in time.

Here is a simple analogy for the issue:

    function getFive(){

        var data;

        setTimeout(function(){ // set a timer for one second in the future

           data = 5; // after a second, do this

        }, 1000);

        return data;

    }

    document.body.innerHTML = getFive(); // `undefined` here and not 5

The value of data is undefined since the data = 5 part has not executed yet. It will likely execute in a second but by that time it is irrelevant to the returned value.

Since the operation did not happen yet (AJAX, server call, IO, timer) you're returning the value before the request got the chance to tell your code what that value is.

One possible solution to this problem is to code re-actively , telling your program what to do when the calculation completed. Promises actively enable this by being temporal (time-sensitive) in nature.

Quick recap on promises

A Promise is a value over time. Promises have state, they start as pending with no value and can settle to:

• 
  fulfilled meaning that the computation completed successfully.


• 
  rejected meaning that the computation failed.

A promise can only change states once after which it will always stay at the same state forever. You can attach then handlers to promises to extract their value and handle errors. then handlers allow chaining of calls. Promises are created by using APIs that return them. For example, the more modern AJAX replacement fetch or jQuery's $.get return promises.

When we call .then on a promise and return something from it - we get a promise for the processed value. If we return another promise we'll get amazing things, but let's hold our horses.

With promises

Let's see how we can solve the above issue with promises. First, let's demonstrate our understanding of promise states from above by using the Promise constructor for creating a delay function:

function delay(ms){ // takes amount of milliseconds

    // returns a new promise

    return new Promise(function(resolve, reject){

        setTimeout(function(){ // when the time is up

            resolve(); // change the promise to the fulfilled state

        }, ms);

    });

}

Now, after we converted setTimeout to use promises, we can use then to make it count:

function delay(ms){ // takes amount of milliseconds

  // returns a new promise

  return new Promise(function(resolve, reject){

    setTimeout(function(){ // when the time is up

      resolve(); // change the promise to the fulfilled state

    }, ms);

  });

}



function getFive(){

  // we're RETURNING the promise, remember, a promise is a wrapper over our value

  return delay(100).then(function(){ // when the promise is ready

      return 5; // return the value 5, promises are all about return values

  })

}

// we _have_ to wrap it like this in the call site, we can't access the plain value

getFive().then(function(five){ 

   document.body.innerHTML = five;

});

Basically, instead of returning a value which we can't do because of the concurrency model - we're returning a wrapper for a value that we can unwrap with then. It's like a box you can open with then.

Applying this

This stands the same for your original API call, you can:

function foo() {

    // RETURN the promise

    return fetch("/echo/json").then(function(response){

        return response.json(); // process it inside the `then`

    });

}



foo().then(function(response){

    // access the value inside the `then`

})

So this works just as well. We've learned we can't return values from already asynchronous calls but we can use promises and chain them to perform processing. We now know how to return the response from an asynchronous call.

ES2015 (ES6)

ES6 introduces generators which are functions that can return in the middle and then resume the point they were at. This is typically useful for sequences, for example:

function* foo(){ // notice the star, this is ES6 so new browsers/node/io only

    yield 1;

    yield 2;

    while(true) yield 3;

}

Is a function that returns an iterator over the sequence 1,2,3,3,3,3,.... which can be iterated. While this is interesting on its own and opens room for a lot of possibility there is one particular interesting case.

If the sequence we're producing is a sequence of actions rather than numbers - we can pause the function whenever an action is yielded and wait for it before we resume the function. So instead of a sequence of numbers, we need a sequence of future values - that is: promises.

This somewhat tricky but very powerful trick lets us write asynchronous code in a synchronous manner. There are several "runners" that do this for you, writing one is a short few lines of code but is beyond the scope of this answer. I'll be using Bluebird's Promise.coroutine here, but there are other wrappers like co or Q.async.

var foo = coroutine(function*(){

    var data = yield fetch("/echo/json"); // notice the yield

    // code here only executes _after_ the request is done

    return data.json(); // data is defined

});

This method returns a promise itself, which we can consume from other coroutines. For example:

var main = coroutine(function*(){

   var bar = yield foo(); // wait our earlier coroutine, it returns a promise

   // server call done here, code below executes when done

   var baz = yield fetch("/api/users/"+bar.userid); // depends on foo's result

   console.log(baz); // runs after both requests done

});

main();

ES2016 (ES7)

In ES7, this is further standardized, there are several proposals right now but in all of them you can await promise. This is just "sugar" (nicer syntax) for the ES6 proposal above by adding the async and await keywords. Making the above example:

async function foo(){

    var data = await fetch("/echo/json"); // notice the await

    // code here only executes _after_ the request is done

    return data.json(); // data is defined

}

It still returns a promise just the same :)

You are using Ajax incorrectly. The idea is not to have it return anything, but instead hand off the data to something called a callback function, which handles the data.

That is:

function handleData( responseData ) {



    // Do what you want with the data

    console.log(responseData);

}



$.ajax({

    url: "hi.php",

    ...

    success: function ( data, status, XHR ) {

        handleData(data);

    }

});

Returning anything in the submit handler will not do anything. You must instead either hand off the data, or do what you want with it directly inside the success function.

The simplest solution is create a JavaScript function and call it for the Ajax success callback.

function callServerAsync(){

    $.ajax({

        url: '...',

        success: function(response) {



            successCallback(response);

        }

    });

}



function successCallback(responseObj){

    // Do something like read the response and show data

    alert(JSON.stringify(responseObj)); // Only applicable to JSON response

}



function foo(callback) {



    $.ajax({

        url: '...',

        success: function(response) {

           return callback(null, response);

        }

    });

}



var result = foo(function(err, result){

          if (!err)

           console.log(result);    

}); 

I will answer with a horrible-looking, hand-drawn comic. The second image is the reason why result is undefined in your code example.

Angular1

For people who are using AngularJS, can handle this situation using Promises.

Here it says,

Promises can be used to unnest asynchronous functions and allows one to chain multiple functions together.

You can find a nice explanation here also.

Example found in docs mentioned below.

  promiseB = promiseA.then(

    function onSuccess(result) {

      return result + 1;

    }

    ,function onError(err) {

      //Handle error

    }

  );



 // promiseB will be resolved immediately after promiseA is resolved 

 // and its value will be the result of promiseA incremented by 1.

Angular2 and Later

In Angular2 with look at the following example, but its recommended to use Observables with Angular2.

 search(term: string) {

     return this.http

  .get(`https://api.spotify.com/v1/search?q=${term}&type=artist`)

  .map((response) => response.json())

  .toPromise();

}

You can consume that in this way,

search() {

    this.searchService.search(this.searchField.value)

      .then((result) => {

    this.result = result.artists.items;

  })

  .catch((error) => console.error(error));

}

See the original post here. But Typescript does not support native es6 Promises, if you want to use it, you might need plugin for that.

Additionally here is the promises spec define here.

Most of the answers here give useful suggestions for when you have a single async operation, but sometimes, this comes up when you need to do an asynchronous operation for each entry in an array or other list-like structure. The temptation is to do this:

// WRONG

var results = ;

theArray.forEach(function(entry) {

    doSomethingAsync(entry, function(result) {

        results.push(result);

    });

});

console.log(results); // E.g., using them, returning them, etc.

Example:

// WRONG

var theArray = [1, 2, 3];

var results = ;

theArray.forEach(function(entry) {

    doSomethingAsync(entry, function(result) {

        results.push(result);

    });

});

console.log("Results:", results); // E.g., using them, returning them, etc.



function doSomethingAsync(value, callback) {

    console.log("Starting async operation for " + value);

    setTimeout(function() {

        console.log("Completing async operation for " + value);

        callback(value * 2);

    }, Math.floor(Math.random() * 200));

}

.as-console-wrapper {

  max-height: 100% !important;

}

The reason that doesn't work is that the callbacks from doSomethingAsync haven't run yet by the time you're trying to use the results.

So, if you have an array (or list of some kind) and want to do async operations for each entry, you have two options: Do the operations in parallel (overlapping), or in series (one after another in sequence).

Parallel

You can start all of them and keep track of how many callbacks you're expecting, and then use the results when you've gotten that many callbacks:

var results = ;

var expecting = theArray.length;

theArray.forEach(function(entry, index) {

    doSomethingAsync(entry, function(result) {

        results[index] = result;

        if (--expecting === 0) {

            // Done!

            console.log("Results:", results); // E.g., using the results

        }

    });

});

Example:

var theArray = [1, 2, 3];

var results = ;

var expecting = theArray.length;

theArray.forEach(function(entry, index) {

    doSomethingAsync(entry, function(result) {

        results[index] = result;

        if (--expecting === 0) {

            // Done!

            console.log("Results:", results); // E.g., using the results

        }

    });

});



function doSomethingAsync(value, callback) {

    console.log("Starting async operation for " + value);

    setTimeout(function() {

        console.log("Completing async operation for " + value);

        callback(value * 2);

    }, Math.floor(Math.random() * 200));

}

.as-console-wrapper {

  max-height: 100% !important;

}

(We could do away with expecting and just use results.length === theArray.length, but that leaves us open to the possibility that theArray is changed while the calls are outstanding...)

Notice how we use the index from forEach to save the result in results in the same position as the entry it relates to, even if the results arrive out of order (since async calls don't necessarily complete in the order in which they were started).

But what if you need to return those results from a function? As the other answers have pointed out, you can't; you have to have your function accept and call a callback (or return a Promise). Here's a callback version:

function doSomethingWith(theArray, callback) {

    var results = ;

    var expecting = theArray.length;

    theArray.forEach(function(entry, index) {

        doSomethingAsync(entry, function(result) {

            results[index] = result;

            if (--expecting === 0) {

                // Done!

                callback(results);

            }

        });

    });

}

doSomethingWith(theArray, function(results) {

    console.log("Results:", results);

});

Example:

function doSomethingWith(theArray, callback) {

    var results = ;

    var expecting = theArray.length;

    theArray.forEach(function(entry, index) {

        doSomethingAsync(entry, function(result) {

            results[index] = result;

            if (--expecting === 0) {

                // Done!

                callback(results);

            }

        });

    });

}

doSomethingWith([1, 2, 3], function(results) {

    console.log("Results:", results);

});



function doSomethingAsync(value, callback) {

    console.log("Starting async operation for " + value);

    setTimeout(function() {

        console.log("Completing async operation for " + value);

        callback(value * 2);

    }, Math.floor(Math.random() * 200));

}

.as-console-wrapper {

  max-height: 100% !important;

}

Or here's a version returning a Promise instead:

function doSomethingWith(theArray) {

    return new Promise(function(resolve) {

        var results = ;

        var expecting = theArray.length;

        theArray.forEach(function(entry, index) {

            doSomethingAsync(entry, function(result) {

                results[index] = result;

                if (--expecting === 0) {

                    // Done!

                    resolve(results);

                }

            });

        });

    });

}

doSomethingWith(theArray).then(function(results) {

    console.log("Results:", results);

});

Of course, if doSomethingAsync passed us errors, we'd use reject to reject the promise when we got an error.)

Example:

function doSomethingWith(theArray) {

    return new Promise(function(resolve) {

        var results = ;

        var expecting = theArray.length;

        theArray.forEach(function(entry, index) {

            doSomethingAsync(entry, function(result) {

                results[index] = result;

                if (--expecting === 0) {

                    // Done!

                    resolve(results);

                }

            });

        });

    });

}

doSomethingWith([1, 2, 3]).then(function(results) {

    console.log("Results:", results);

});



function doSomethingAsync(value, callback) {

    console.log("Starting async operation for " + value);

    setTimeout(function() {

        console.log("Completing async operation for " + value);

        callback(value * 2);

    }, Math.floor(Math.random() * 200));

}

.as-console-wrapper {

  max-height: 100% !important;

}

(Or alternately, you could make a wrapper for doSomethingAsync that returns a promise, and then do the below...)

If doSomethingAsync gives you a Promise, you can use Promise.all:

function doSomethingWith(theArray) {

    return Promise.all(theArray.map(function(entry) {

        return doSomethingAsync(entry, function(result) {

            results.push(result);

        });

    }));

}

doSomethingWith(theArray).then(function(results) {

    console.log("Results:", results);

});

Example:

function doSomethingWith(theArray) {

    return Promise.all(theArray.map(function(entry) {

        return doSomethingAsync(entry, function(result) {

            results.push(result);

        });

    }));

}

doSomethingWith([1, 2, 3]).then(function(results) {

    console.log("Results:", results);

});



function doSomethingAsync(value) {

    console.log("Starting async operation for " + value);

    return new Promise(function(resolve) {

        setTimeout(function() {

            console.log("Completing async operation for " + value);

            resolve(value * 2);

        }, Math.floor(Math.random() * 200));

    });

}

.as-console-wrapper {

  max-height: 100% !important;

}

Note that Promise.all resolves its promise with an array of the results of all of the promises you give it when they are all resolved, or rejects its promise when the first of the promises you give it rejects.

Series

Suppose you don't want the operations to be in parallel? If you want to run them one after another, you need to wait for each operation to complete before you start the next. Here's an example of a function that does that and calls a callback with the result:

function doSomethingWith(theArray, callback) {

    var results = ;

    doOne(0);

    function doOne(index) {

        if (index < theArray.length) {

            doSomethingAsync(theArray[index], function(result) {

                results.push(result);

                doOne(index + 1);

            });

        } else {

            // Done!

            callback(results);

        }

    }

}

doSomethingWith(theArray, function(results) {

    console.log("Results:", results);

});

(Since we're doing the work in series, we can just use results.push(result) since we know we won't get results out of order. In the above we could have used results[index] = result;, but in some of the following examples we don't have an index to use.)

Example:

function doSomethingWith(theArray, callback) {

    var results = ;

    doOne(0);

    function doOne(index) {

        if (index < theArray.length) {

            doSomethingAsync(theArray[index], function(result) {

                results.push(result);

                doOne(index + 1);

            });

        } else {

            // Done!

            callback(results);

        }

    }

}

doSomethingWith([1, 2, 3], function(results) {

    console.log("Results:", results);

});



function doSomethingAsync(value, callback) {

    console.log("Starting async operation for " + value);

    setTimeout(function() {

        console.log("Completing async operation for " + value);

        callback(value * 2);

    }, Math.floor(Math.random() * 200));

}

.as-console-wrapper {

  max-height: 100% !important;

}

(Or, again, build a wrapper for doSomethingAsync that gives you a promise and do the below...)

If doSomethingAsync gives you a Promise, if you can use ES2017+ syntax (perhaps with a transpiler like Babel), you can use an async function with for-of and await:

async function doSomethingWith(theArray) {

    const results = ;

    for (const entry of theArray) {

        results.push(await doSomethingAsync(entry));

    }

    return results;

}

doSomethingWith(theArray).then(results => {

    console.log("Results:", results);

});

Example:

async function doSomethingWith(theArray) {

    const results = ;

    for (const entry of theArray) {

        results.push(await doSomethingAsync(entry));

    }

    return results;

}

doSomethingWith([1, 2, 3]).then(function(results) {

    console.log("Results:", results);

});



function doSomethingAsync(value) {

    console.log("Starting async operation for " + value);

    return new Promise(function(resolve) {

        setTimeout(function() {

            console.log("Completing async operation for " + value);

            resolve(value * 2);

        }, Math.floor(Math.random() * 200));

    });

}

.as-console-wrapper {

  max-height: 100% !important;

}

If you can't use ES2017+ syntax (yet), you can use a variation on the "Promise reduce" pattern (this is more complex than the usual Promise reduce because we're not passing the result from one into the next, but instead gathering up their results in an array):

function doSomethingWith(theArray) {

    return theArray.reduce(function(p, entry) {

        return p.then(function(results) {

            return doSomethingAsync(entry).then(function(result) {

                results.push(result);

                return results;

            });

        });

    }, Promise.resolve());

}

doSomethingWith(theArray).then(function(results) {

    console.log("Results:", results);

});

Example:

function doSomethingWith(theArray) {

    return theArray.reduce(function(p, entry) {

        return p.then(function(results) {

            return doSomethingAsync(entry).then(function(result) {

                results.push(result);

                return results;

            });

        });

    }, Promise.resolve());

}

doSomethingWith([1, 2, 3]).then(function(results) {

    console.log("Results:", results);

});



function doSomethingAsync(value) {

    console.log("Starting async operation for " + value);

    return new Promise(function(resolve) {

        setTimeout(function() {

            console.log("Completing async operation for " + value);

            resolve(value * 2);

        }, Math.floor(Math.random() * 200));

    });

}

.as-console-wrapper {

  max-height: 100% !important;

}

...which is less cumbersome with ES2015+ arrow functions:

function doSomethingWith(theArray) {

    return theArray.reduce((p, entry) => p.then(results => doSomethingAsync(entry).then(result => {

        results.push(result);

        return results;

    })), Promise.resolve());

}

doSomethingWith(theArray).then(results => {

    console.log("Results:", results);

});

Example:

function doSomethingWith(theArray) {

    return theArray.reduce((p, entry) => p.then(results => doSomethingAsync(entry).then(result => {

        results.push(result);

        return results;

    })), Promise.resolve());

}

doSomethingWith([1, 2, 3]).then(function(results) {

    console.log("Results:", results);

});



function doSomethingAsync(value) {

    console.log("Starting async operation for " + value);

    return new Promise(function(resolve) {

        setTimeout(function() {

            console.log("Completing async operation for " + value);

            resolve(value * 2);

        }, Math.floor(Math.random() * 200));

    });

}

.as-console-wrapper {

  max-height: 100% !important;

}

Have a look at this example:

var app = angular.module('plunker', );



app.controller('MainCtrl', function($scope,$http) {



    var getJoke = function(){

        return $http.get('http://api.icndb.com/jokes/random').then(function(res){

            return res.data.value;  

        });

    }



    getJoke().then(function(res) {

        console.log(res.joke);

    });

});

As you can see getJoke is returning a resolved promise (it is resolved when returning res.data.value). So you wait until the $http.get request is completed and then console.log(res.joke) is executed (as a normal asynchronous flow).

This is the plnkr:

http://embed.plnkr.co/XlNR7HpCaIhJxskMJfSg/

ES6 way (async - await)

(function(){

  async function getJoke(){

    let response = await fetch('http://api.icndb.com/jokes/random');

    let data = await response.json();

    return data.value;

  }



  getJoke().then((joke) => {

    console.log(joke);

  });

})();

Another approach to return a value from an asynchronous function, is to pass in an object that will store the result from the asynchronous function.

Here is an example of the same:

var async = require("async");



// This wires up result back to the caller

var result = {};

var asyncTasks = ;

asyncTasks.push(function(_callback){

    // some asynchronous operation

    $.ajax({

        url: '...',

        success: function(response) {

            result.response = response;

            _callback();

        }

    });

});



async.parallel(asyncTasks, function(){

    // result is available after performing asynchronous operation

    console.log(result)

    console.log('Done');

});

I am using the result object to store the value during the asynchronous operation. This allows the result be available even after the asynchronous job.

I use this approach a lot. I would be interested to know how well this approach works where wiring the result back through consecutive modules is involved.

This is one of the places which two ways data binding that's used in many new JavaScript frameworks will work greatly for you...

So if you are using Angular, React or any other frameworks which do two ways data binding, this issue is simply fixed for you, so in easy word, your result is undefined at the first stage, so you have got result = undefined before you receive the data, then as soon as you get the result, it will updated and get assigned to the new value which is respond of your Ajax call...

But how you can do it in pure javascript or jQuery for example as you asked in this question?

You can use a callback, promise and recently observable to handle it for you, for example in promises we have some function like success() or then() which will be executed when your data is ready for you, same with callback or subscribe function on observable.

For example in your case which you are using jQuery, you can do something like this:

$(document).ready(function(){

    function foo() {

        $.ajax({url: "api/data", success: function(data){

            fooDone(data); //after we have data, we pass it to fooDone

        }});

    };



    function fooDone(data) {

        console.log(data); //fooDone has the data and console.log it

    };



    foo(); //call happens here

});

For more information study about promises and observables which are newer ways to do this async stuffs.

While promises and callbacks work fine in many situations, it is a pain in the rear to express something like:

if (!name) {

  name = async1();

}

async2(name);

You'd end up going through async1; check if name is undefined or not and call the callback accordingly.

async1(name, callback) {

  if (name)

    callback(name)

  else {

    doSomething(callback)

  }

}



async1(name, async2)

While it is okay in small examples it gets annoying when you have a lot of similar cases and error handling involved.

Fibers helps in solving the issue.

var Fiber = require('fibers')



function async1(container) {

  var current = Fiber.current

  var result

  doSomething(function(name) {

    result = name

    fiber.run()

  })

  Fiber.yield()

  return result

}



Fiber(function() {

  var name

  if (!name) {

    name = async1()

  }

  async2(name)

  // Make any number of async calls from here

}

You can checkout the project here.

Short answer is, you have to implement a callback like this:

function callback(response) {

    // Here you can do what ever you want with the response object.

    console.log(response);

}



$.ajax({

    url: "...",

    success: callback

});

The following example I have written shows how to

• Handle asynchronous HTTP calls;


• Wait for response from each API call;


• Use Promise pattern;


• Use Promise.all pattern to join multiple HTTP calls;

This working example is self-contained. It will define a simple request object that uses the window XMLHttpRequest object to make calls. It will define a simple function to wait for a bunch of promises to be completed.

Context. The example is querying the Spotify Web API endpoint in order to search for playlist objects for a given set of query strings:

[

 "search?type=playlist&q=%22doom%20metal%22",

 "search?type=playlist&q=Adele"

]

For each item, a new Promise will fire a block - ExecutionBlock, parse the result, schedule a new set of promises based on the result array, that is a list of Spotify user objects and execute the new HTTP call within the ExecutionProfileBlock asynchronously.

You can then see a nested Promise structure, that lets you spawn multiple and completely asynchronous nested HTTP calls, and join the results from each subset of calls through Promise.all.

NOTE
Recent Spotify search APIs will require an access token to be specified in the request headers:

-H "Authorization: Bearer {your access token}" 

So, you to run the following example you need to put your access token in the request headers:

var spotifyAccessToken = "YourSpotifyAccessToken";

var console = {

    log: function(s) {

        document.getElementById("console").innerHTML += s + "<br/>"

    }

}



// Simple XMLHttpRequest

// based on https://davidwalsh.name/xmlhttprequest

SimpleRequest = {

    call: function(what, response) {

        var request;

        if (window.XMLHttpRequest) { // Mozilla, Safari, ...

            request = new XMLHttpRequest();

        } else if (window.ActiveXObject) { // Internet Explorer

            try {

                request = new ActiveXObject('Msxml2.XMLHTTP');

            }

            catch (e) {

                try {

                  request = new ActiveXObject('Microsoft.XMLHTTP');

                } catch (e) {}

            }

        }



        // State changes

        request.onreadystatechange = function() {

            if (request.readyState === 4) { // Done

                if (request.status === 200) { // Complete

                    response(request.responseText)

                }

                else

                    response();

            }

        }

        request.open('GET', what, true);

        request.setRequestHeader("Authorization", "Bearer " + spotifyAccessToken);

        request.send(null);

    }

}



//PromiseAll

var promiseAll = function(items, block, done, fail) {

    var self = this;

    var promises = ,

                   index = 0;

    items.forEach(function(item) {

        promises.push(function(item, i) {

            return new Promise(function(resolve, reject) {

                if (block) {

                    block.apply(this, [item, index, resolve, reject]);

                }

            });

        }(item, ++index))

    });

    Promise.all(promises).then(function AcceptHandler(results) {

        if (done) done(results);

    }, function ErrorHandler(error) {

        if (fail) fail(error);

    });

}; //promiseAll



// LP: deferred execution block

var ExecutionBlock = function(item, index, resolve, reject) {

    var url = "https://api.spotify.com/v1/"

    url += item;

    console.log( url )

    SimpleRequest.call(url, function(result) {

        if (result) {



            var profileUrls = JSON.parse(result).playlists.items.map(function(item, index) {

                return item.owner.href;

            })

            resolve(profileUrls);

        }

        else {

            reject(new Error("call error"));

        }

    })

}



arr = [

    "search?type=playlist&q=%22doom%20metal%22",

    "search?type=playlist&q=Adele"

]



promiseAll(arr, function(item, index, resolve, reject) {

    console.log("Making request [" + index + "]")

    ExecutionBlock(item, index, resolve, reject);

}, function(results) { // Aggregated results



    console.log("All profiles received " + results.length);

    //console.log(JSON.stringify(results[0], null, 2));



    ///// promiseall again



    var ExecutionProfileBlock = function(item, index, resolve, reject) {

        SimpleRequest.call(item, function(result) {

            if (result) {

                var obj = JSON.parse(result);

                resolve({

                    name: obj.display_name,

                    followers: obj.followers.total,

                    url: obj.href

                });

            } //result

        })

    } //ExecutionProfileBlock



    promiseAll(results[0], function(item, index, resolve, reject) {

        //console.log("Making request [" + index + "] " + item)

        ExecutionProfileBlock(item, index, resolve, reject);

    }, function(results) { // aggregated results

        console.log("All response received " + results.length);

        console.log(JSON.stringify(results, null, 2));

    }



    , function(error) { // Error

        console.log(error);

    })



    /////



  },

  function(error) { // Error

      console.log(error);

  });

<div id="console" />

I have extensively discussed this solution here.

2017 answer: you can now do exactly what you want in every current browser and node

This is quite simple:

• Return a Promise


• Use the 'await', which will tell JavaScript to await the promise to be resolved into a value (like the HTTP response)


• Add the 'async' keyword to the parent function

Here's a working version of your code:

(async function(){



var response = await superagent.get('...')

console.log(response)



})()

await is supported in all current browsers and node 8

You can use this custom library (written using Promise) to make a remote call.

function $http(apiConfig) {

    return new Promise(function (resolve, reject) {

        var client = new XMLHttpRequest();

        client.open(apiConfig.method, apiConfig.url);

        client.send();

        client.onload = function () {

            if (this.status >= 200 && this.status < 300) {

                // Performs the function "resolve" when this.status is equal to 2xx.

                // Your logic here.

                resolve(this.response);

            }

            else {

                // Performs the function "reject" when this.status is different than 2xx.

                reject(this.statusText);

            }

        };

        client.onerror = function () {

            reject(this.statusText);

        };

    });

}

Simple usage example:

$http({

    method: 'get',

    url: 'google.com'

}).then(function(response) {

    console.log(response);

}, function(error) {

    console.log(error)

});

Js is a single threaded.

Browser can be divided into three parts:

1)Event Loop

2)Web API

3)Event Queue

Event Loop runs for forever i.e kind of infinite loop.Event Queue is where all your function are pushed on some event(example:click) this is one by one carried out of queue and put into Event loop which execute this function and prepares it self for next one after first one is executed.This means Execution of one function doesn't starts till the function before it in queue is executed in event loop.

Now let us think we pushed two functions in a queue one is for getting a data from server and another utilises that data.We pushed the serverRequest() function in queue first then utiliseData() function. serverRequest function goes in event loop and makes a call to server as we never know how much time it will take to get data from server
so this process is expected to take time and so we busy our event loop thus hanging our page, that's where Web API come into role it take this function from event loop and deals with server making event loop free so that we can execute next function from queue.The next function in queue is utiliseData() which goes in loop but because of no data available it goes waste and execution of next function continues till end of the queue.(This is called Async calling i.e we can do something else till we get data)

Let suppose our serverRequest() function had a return statement in a code, when we get back data from server Web API will push it in queue at the end of queue.
As it get pushed at end in queue we cannot utilise its data as there is no function left in our queue to utilise this data.Thus it is not possible to return something from Async Call.

Thus Solution to this is callback or promise.

A Image from one of the answers here, Correctly explains callback use...
We give our function(function utilising data returned from server) to function calling server.

 function doAjax(callbackFunc, method, url) {

  var xmlHttpReq = new XMLHttpRequest();

  xmlHttpReq.open(method, url);

  xmlHttpReq.onreadystatechange = function() {



      if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {

        callbackFunc(xmlHttpReq.responseText);

      }





  }

  xmlHttpReq.send(null);



}

In my Code it is called as

function loadMyJson(categoryValue){

  if(categoryValue==="veg")

  doAjax(print,"GET","http://localhost:3004/vegetables");

  else if(categoryValue==="fruits")

  doAjax(print,"GET","http://localhost:3004/fruits");

  else 

  console.log("Data not found");

}

Read here for new methods in ECMA(2016/17) for making async call(@Felix Kling Answer on Top)
https://stackoverflow.com/a/14220323/7579856

Another solution is to execute code via sequential executor nsynjs.

If underlying function is promisified

nsynjs will evaluate all promises sequentially, and put promise result into data property: