How do I return the response from an asynchronous call

Question

I have a function foo which makes an asynchronous request  How can I return the response result from foo  I tried returning the value from the callback  as well as assigning the result to a local variable inside the function and returning that one  but none of those ways actually return the response  they all return undefined or whatever the initial value of the variable result is   Example using jQuery s ajax function  function foo         var result         ajax           url                 success  function response                result   response                 return response      lt - I tried that one as well                        return result     It always returns  undefined     Example using node js  function foo         var result       fs readFile  quot path to file quot   function err  data            result   data             return data      lt - I tried that one as well              return result     It always returns  undefined     Example using the then block of a promise  function foo         var result       fetch url  then function response            result   response             return response      lt - I tried that one as well              return result     It always returns  undefined

User · Answer

Here are some approaches to work with asynchronous requests:

Browser Promise object
Q - A promise library for JavaScript
A+ Promises.js
jQuery deferred
XMLHttpRequest API
Using callback concept - As implementation in first answer

Example: jQuery deferred implementation to work with multiple requests

_x000D_

var App = App || {};

App = {
    getDataFromServer: function(){

      var self = this,
                 deferred = $.Deferred(),
                 requests = [];

      requests.push($.getJSON('request/ajax/url/1'));
      requests.push($.getJSON('request/ajax/url/2'));

      $.when.apply(jQuery, requests).done(function(xhrResponse) {
        return deferred.resolve(xhrResponse.result);
      });
      return deferred;
    },

    init: function(){

        this.getDataFromServer().done(_.bind(function(resp1, resp2) {

           // Do the operations which you wanted to do when you
           // get a response from Ajax, for example, log response.
        }, this));
    }
};
App.init();

_x000D_

User · Answer

Of course there are many approaches like synchronous request  promise  but from my experience I think you should use the callback approach  It s natural to asynchronous behavior of Javascript  So  your code snippet can be rewrite a little different   function foo         var result         ajax           url                 success  function response                myCallback response                          return result     function myCallback response           Does something

User · Answer

Use a callback   function inside the foo   success  Try in this way  It is simple and easy to understand   nbsp   var lat       var lon       function callback data        lat   data lat      lon   data lon    function getLoc         var url    http   ip-api com json        getJSON url  function data            callback data              getLoc

User · Answer

I think no matter what method or mechanism used  or whatever the framework is  Angular React  that hides it from you  the following principle holds    In the flow of the program  think code or even the lowest level  machine code   the data may not arrive back 2 seconds later  3 seconds later  or may not arrive at all  so there is no usual return to use in order to return the data  It is the classic  observer pattern    It can be in the form of a  callback    It is   hey  I am interested in knowing a successful arrival of data  would you let me know when it does   So you register an observer to be notified  or a function to be called to notify about the successful arrival of the data   You also usually register an observer for the failure of arrival of such data  When it is successful arrival of data  or a failure of the return of such data  the registered observers  or callbacks  are notified together with the data  or called with the data   If the observer is registered in the form of a callback function foo  then foo data  will be called  If the observer is registered in the form of an object foo  then depending on the interface  it could be that foo notify data  is called

User · Answer

Rather than throwing code at you  there are 2 concepts that are key to understanding how JS handles callbacks and asynchronicity   is that even a word   The Event Loop and Concurrency Model There are three things you need to be aware of  The queue  the event loop and the stack In broad  simplistic terms  the event loop is like the project manager  it is constantly listening for any functions that want to run and communicates between the queue and the stack  while  queue waitForMessage         queue processNextMessage       Once it receives a message to run something it adds it to the queue  The queue is the list of things that are waiting to execute  like your AJAX request   imagine it like this   1  call foo com api bar using foobarFunc  2  Go perform an infinite loop      and so on  When one of these messages is going to execute it pops the message from the queue and creates a stack  the stack is everything JS needs to execute to perform the instruction in the message  So in our example it s being told to call foobarFunc function foobarFunc  var      console log anotherFunction var       So anything that foobarFunc needs to execute  in our case anotherFunction  will get pushed onto the stack  executed  and then forgotten about - the event loop will then move onto the next thing in the queue  or listen for messages  The key thing here is the order of execution  That is WHEN is something going to run When you make a call using AJAX to an external party or run any asynchronous code  a setTimeout for example   Javascript is dependant upon a response before it can proceed  The big question is when will it get the response  The answer is we don t know - so the event loop is waiting for that message to say  quot hey run me quot   If JS just waited around for that message synchronously your app would freeze and it will suck  So JS carries on executing the next item in the queue whilst waiting for the message to get added back to the queue  That s why with asynchronous functionality we use things called callbacks  - A function or handler that  when passed into another function  will be executed at a later date  A promise uses callbacks  functions passed to  then   for eg   as a way to reason about this asynchronous behaviour in a more linear way  The promise is a way of saying  quot I promise to return something at some point quot  and the callback is how we handle that value that is eventually returned  jQuery uses specific callbacks called deffered done deffered fail and deffered always  amongst others   You can see them all here So what you need to do is pass a function that is promised to execute at some point with data that is passed to it  Because a callback is not executed immediately but at a later time it s important to pass the reference to the function not it executed  so function foo bla      console log bla     so most of the time  but not always  you ll pass foo not foo   Hopefully that will make some sense  When you encounter things like this that seem confusing - i highly recommend reading the documentation fully to at least get an understanding of it  It will make you a much better developer

User · Answer

For a more general explanation of async behaviour with different examples  please see Why is my variable unaltered after I modify it inside of a function  - Asynchronous code reference   If you already understand the problem  skip to the possible solutions below   The problem 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    ajax returns immediately and the next statement  return result   is executed before the function you passed as success callback was even called  Here is an analogy which hopefully makes the difference between synchronous and asynchronous flow clearer  Synchronous Imagine you make a phone call to a friend and ask him to look something up for you  Although it might take a while  you wait on the phone and stare into space  until your friend gives you the answer that you needed  The same is happening when you make a function call containing  quot normal quot  code  function findItem         var item      while item not found               search           return item     var item   findItem        Do something with item doSomethingElse     Even though findItem might take a long time to execute  any code coming after var item   findItem    has to wait until the function returns the result  Asynchronous You call your friend again for the same reason  But this time you tell him that you are in a hurry and he should call you back on your mobile phone  You hang up  leave the house  and do whatever you planned to do  Once your friend calls you back  you are dealing with the information he gave to you  That s exactly what s happening when you do an Ajax request  findItem function item           Do something with the item     doSomethingElse     Instead of waiting for the response  the execution continues immediately and the statement after the Ajax call is executed  To get the response eventually  you provide a function to be called once the response was received  a callback  notice something  call back     Any statement coming after that call is executed before the callback is called   Solution s  Embrace the asynchronous nature of JavaScript  While certain asynchronous operations provide synchronous counterparts  so does  quot Ajax quot    it s generally discouraged to use them  especially in a browser context  Why is it bad do you ask  JavaScript runs in the UI thread of the browser and any long-running process will lock the UI  making it unresponsive  Additionally  there is an upper limit on the execution time for JavaScript and the browser will ask the user whether to continue the execution or not  All of this is a really bad user experience  The user won t be able to tell whether everything is working fine or not  Furthermore  the effect will be worse for users with a slow connection  In the following we will look at three different solutions that are all building on top of each other   Promises with async await  ES2017   available in older browsers if you use a transpiler or regenerator  Callbacks  popular in node  Promises with then    ES2015   available in older browsers if you use one of the many promise libraries   All three are available in current browsers  and node 7    ES2017   Promises with async await The ECMAScript version released in 2017 introduced syntax-level support for asynchronous functions  With the help of async and await  you can write asynchronous in a  quot synchronous style quot   The code is still asynchronous  but it s easier to read understand  async await builds on top of promises  an async function always returns a promise  await  quot unwraps quot  a promise and either result in the value the promise was resolved with or throws an error if the promise was rejected  Important  You can only use await inside an async function  Right now  top-level await isn t yet supported  so you might have to make an async IIFE  Immediately Invoked Function Expression  to start an async context  You can read more about async and await on MDN  Here is an example that builds on top of delay above     Using  superagent  which will return a promise  var superagent   require  superagent       This is isn t declared as  async  because it already returns a promise function delay           delay  returns a promise   return new Promise function resolve  reject           Only  delay  is able to resolve or reject the promise     setTimeout function           resolve 42      After 3 seconds  resolve the promise with value 42        3000             async function getAllBooks       try          GET a list of book IDs of the current user     var bookIDs   await superagent get   user books           wait for 3 seconds  just for the sake of this example      await delay           GET information about each book     return await superagent get   books ids   JSON stringify bookIDs        catch error           If any of the awaited promises was rejected  this catch block        would catch the rejection reason     return null            Start an IIFE to use  await  at the top level  async function      let books   await getAllBooks      console log books          Current browser and node versions support async await  You can also support older environments by transforming your code to ES5 with the help of regenerator  or tools that use regenerator  such as Babel    Let functions accept callbacks A callback is when function 1 is passed to function 2  Function 2 can call function 1 whenever it is ready  In the context of an asynchronous process  the callback will be called whenever the asynchronous process is done  Usually  the result is passed to the callback  In the example of the question  you can make foo accept a callback and use it as success callback  So this var result   foo       Code that depends on  result   becomes foo function result           Code that depends on  result       Here we defined the function  quot inline quot  but you can pass any function reference  function myCallback result           Code that depends on  result     foo myCallback    foo itself is defined as follows  function foo callback          ajax                          success  callback            callback will refer to the function we pass to foo when we call it and we pass it on to success  I e  once the Ajax request is successful    ajax will call callback and pass the response to the callback  which can be referred to with result  since this is how we defined the callback   You can also process the response before passing it to the callback  function foo callback          ajax                          success  function response                   For example  filter the response             callback filtered response                        It s easier to write code using callbacks than it may seem  After all  JavaScript in the browser is heavily event-driven  DOM events   Receiving the Ajax response is nothing else but an event  Difficulties could arise when you have to work with third-party code  but most problems can be solved by just thinking through the application flow   ES2015   Promises with then   The Promise API is a new feature of ECMAScript 6  ES2015   but it has good browser support already  There are also many libraries which implement the standard Promises API and provide additional methods to ease the use and composition of asynchronous functions  e g  bluebird   Promises are containers for future values  When the promise receives the value  it is resolved  or when it is canceled  rejected   it notifies all of its  quot listeners quot  who want to access this value  The advantage over plain callbacks is that they allow you to decouple your code and they are easier to compose  Here is an example of using a promise  function delay           delay  returns a promise   return new Promise function resolve  reject           Only  delay  is able to resolve or reject the promise     setTimeout function           resolve 42      After 3 seconds  resolve the promise with value 42        3000            delay      then function v        delay  returns a promise     console log v      Log the value once it is resolved         catch function v           Or do something else if it is rejected          it would not happen in this example  since  reject  is not called          Applied to our Ajax call we could use promises like this  function ajax url      return new Promise function resolve  reject        var xhr   new XMLHttpRequest        xhr onload   function           resolve this responseText              xhr onerror   reject      xhr open  GET   url       xhr send             ajax  quot  echo json quot      then function result           Code depending on result         catch function            An error occurred        Describing all the advantages that promise offer is beyond the scope of this answer  but if you write new code  you should seriously consider them  They provide a great abstraction and separation of your code  More information about promises  HTML5 rocks - JavaScript Promises Side note  jQuery s deferred objects Deferred objects are jQuery s custom implementation of promises  before the Promise API was standardized   They behave almost like promises but expose a slightly different API  Every Ajax method of jQuery already returns a  quot deferred object quot   actually a promise of a deferred object  which you can just return from your function  function ajax         return   ajax          ajax   done function result           Code depending on result    fail function            An error occurred      Side note  Promise gotchas Keep in mind that promises and deferred objects are just containers for a future value  they are not the value itself  For example  suppose you had the following  function checkPassword         return   ajax           url    password           data                username      username   val                password      password   val                      type   POST           dataType   json             if  checkPassword             Tell the user they re logged in    This code misunderstands the above asynchrony issues  Specifically    ajax   doesn t freeze the code while it checks the   password  page on your server - it sends a request to the server and while it waits  it immediately returns a jQuery Ajax Deferred object  not the response from the server  That means the if statement is going to always get this Deferred object  treat it as true  and proceed as though the user is logged in  Not good  But the fix is easy  checkPassword    done function r        if  r               Tell the user they re logged in       else              Tell the user their password was bad           fail function x           Tell the user something bad happened       Not recommended  Synchronous  quot Ajax quot  calls As I mentioned  some    asynchronous operations have synchronous counterparts  I don t advocate their use  but for completeness  sake  here is how you would perform a synchronous call  Without jQuery If you directly use a XMLHttpRequest object  pass false as third argument to  open  jQuery If you use jQuery  you can set the async option to false  Note that this option is deprecated since jQuery 1 8  You can then either still use a success callback or access the responseText property of the jqXHR object  function foo         var jqXHR     ajax                         async  false             return jqXHR responseText     If you use any other jQuery Ajax method  such as   get    getJSON  etc   you have to change it to   ajax  since you can only pass configuration parameters to   ajax   Heads up  It is not possible to make a synchronous JSONP request  JSONP by its very nature is always asynchronous  one more reason to not even consider this option

User · Answer

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   x000D   x000D      function getFive    x000D          var data  x000D          setTimeout function       set a timer for one second in the future x000D             data   5     after a second  do this x000D             1000   x000D          return data  x000D        x000D      document body innerHTML   getFive        undefined  here and not 5 x000D   x000D   x000D    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    x000D   x000D  function delay ms      takes amount of milliseconds x000D       returns a new promise x000D    return new Promise function resolve  reject   x000D      setTimeout function       when the time is up x000D        resolve       change the promise to the fulfilled state x000D         ms   x000D        x000D    x000D   x000D  function getFive    x000D       we re RETURNING the promise  remember  a promise is a wrapper over our value x000D    return delay 100  then function       when the promise is ready x000D        return 5     return the value 5  promises are all about return values x000D       x000D    x000D     we  have  to wrap it like this in the call site  we can t access the plain value x000D  getFive   then function five    x000D     document body innerHTML   five  x000D      x000D   x000D   x000D    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

User · Answer

We find ourselves in a universe which appears to progress along a dimension we call  time   We don t really understand what time is  but we have developed abstractions and vocabulary that let us reason and talk about it   past    present    future    before    after    The computer systems we build--more and more--have time as an important dimension  Certain things are set up to happen in the future  Then other things need to happen after those first things eventually occur  This is the basic notion called  asynchronicity   In our increasingly networked world  the most common case of asynchronicity is waiting for some remote system to respond to some request   Consider an example  You call the milkman and order some milk  When it comes  you want to put it in your coffee  You can t put the milk in your coffee right now  because it is not here yet  You have to wait for it to come before putting it in your coffee  In other words  the following won t work   var milk   order milk    put in coffee milk     Because JS has no way to know that it needs to wait for order milk to finish before it executes put in coffee  In other words  it does not know that order milk is asynchronous--is something that is not going to result in milk until some future time  JS  and other declarative languages execute one statement after another without waiting   The classic JS approach to this problem  taking advantage of the fact that JS supports functions as first-class objects which can be passed around  is to pass a function as a parameter to the asynchronous request  which it will then invoke when it has completed its task sometime in the future  That is the  callback  approach  It looks like this   order milk put in coffee     order milk kicks off  orders the milk  then  when and only when it arrives  it invokes put in coffee   The problem with this callback approach is that it pollutes the normal semantics of a function reporting its result with return  instead  functions must not reports their results by calling a callback given as a parameter  Also  this approach can rapidly become unwieldy when dealing with longer sequences of events  For example  let s say that I want to wait for the milk to be put in the coffee  and then and only then perform a third step  namely drinking the coffee  I end up needing to write something like this   order milk function milk    put in coffee milk  drink coffee       where I am passing to put in coffee both the milk to put in it  and also the action  drink coffee  to execute once the milk has been put in  Such code becomes hard to write  and read  and debug   In this case  we could rewrite the code in the question as   var answer    ajax   foo json     done function response      callback response data        function callback data      console log data       Enter promises  This was the motivation for the notion of a  promise   which is a particular type of value which represents a future or asynchronous outcome of some sort  It can represent something that already happened  or that is going to happen in the future  or might never happen at all  Promises have a single method  named then  to which you pass an action to be executed when the outcome the promise represents has been realized   In the case of our milk and coffee  we design order milk to return a promise for the milk arriving  then specify put in coffee as a then action  as follows   order milk     then put in coffee    One advantage of this is that we can string these together to create sequences of future occurrences   chaining     order milk     then put in coffee    then drink coffee    Let s apply promises to your particular problem  We will wrap our request logic inside a function  which returns a promise   function get data       return   ajax   foo json        Actually  all we ve done is added a return to the call to   ajax  This works because jQuery s   ajax already returns a kind of promise-like thing   In practice  without getting into details  we would prefer to wrap this call so as for return a real promise  or use some alternative to   ajax that does so   Now  if we want to load the file and wait for it to finish and then do something  we can simply say   get data     then do something    for instance   get data        then function data    console log data         When using promises  we end up passing lots of functions into then  so it s often helpful to use the more compact ES6-style arrow functions   get data        then data   gt  console log data      The async keyword  But there s still something vaguely dissatisfying about having to write code one way if synchronous and a quite different way if asynchronous  For synchronous  we write  a    b      but if a is asynchronous  with promises we have to write  a     then b     Above  we said   JS has no way to know that it needs to wait for the first call to finish before it executes the second   Wouldn t it be nice if there was some way to tell JS that  It turns out that there is--the await keyword  used inside a special type of function called an  async  function  This feature is part of the upcoming version of ES but is already available in transpilers such as Babel given the right presets  This allows us to simply write  async function morning routine       var milk     await order milk      var coffee   await put in coffee milk     await drink coffee       In your case  you would be able to write something like   async function foo       data   await get data      console log data

User · Answer

XMLHttpRequest 2  first of all read the answers from Benjamin Gruenbaum  amp  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    It s shorter than all other functions Listed  The callback is set directly  so no extra unnecessary closures   It uses the new onload  so you don t have to check for readystate  amp  amp  status  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  amp  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  amp  amp  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

User · Answer

Using Promise  The most perfect answer to this question is using Promise   function ajax method  url  params      return new Promise function resolve  reject        var xhr   new XMLHttpRequest        xhr onload   function           resolve this responseText              xhr onerror   reject      xhr open method  url       xhr send params             Usage  ajax  GET     test    acrive 1   then function result           Code depending on result     catch function            An error occurred         But wait      There is a problem with using promises   Why should we use our own custom Promise   I was using this solution for a while until I figured out there is an error in old browsers   Uncaught ReferenceError  Promise is not defined   So i decided to implement my own Promise class for ES3 to below js compilers if its not defined  Just add this code before your main code and then safely use Promise   if typeof Promise      undefined        function  classCallCheck instance  Constructor            if    instance instanceof Constructor                  throw new TypeError  Cannot call a class as a function                         var Promise   function              function Promise main                var  this   this               classCallCheck this  Promise               this value   undefined              this callbacks                   var resolve   function resolve resolveValue                     this value   resolveValue                   this triggerCallbacks                               var reject   function reject rejectValue                     this value   rejectValue                   this triggerCallbacks                               main resolve  reject                     Promise prototype then   function then cb                var  this2   this              var next   new Promise function  resolve                     this2 callbacks push function  x                        return resolve cb x                                                    return next                     Promise prototype catch   function catch  cb                var  this2   this              var next   new Promise function  reject                     this2 callbacks push function  x                        return reject cb x                                                    return next                     Promise prototype triggerCallbacks   function triggerCallbacks                 var  this3   this              this callbacks forEach function  cb                    cb  this3 value                                      return Promise

User · Answer

The question was       How do I return the response from an asynchronous call    which CAN be interpreted as       How to make asynchronous code look synchronous    The solution will be to avoid callbacks  and use a combination of Promises and async await   I would like to give an example for a Ajax request     Although it can be written in Javascript  I prefer to write it in Python  and compile it to Javascript using Transcrypt  It will be clear enough    Lets first enable JQuery usage  to have   available as S     pragma     alias    S          Define a function which returns a Promise  in this case an Ajax call   def read url  str       deferred   S Deferred       S ajax   type    POST    url   url   data                 success   lambda d  deferred resolve d            error   lambda e  deferred reject e             return deferred promise     Use the asynchronous code as if it were synchronous   async def readALot        try          result1   await read  url 1           result2   await read  url 2       except Exception          console warn  Reading a lot failed

User · Answer

Here is an example that works   const validateName   async userName   gt      const url    abc xyz     try       const response   await axios get url       return response data     catch  err        return false          validateName  user     then data   gt  console log data     catch reason   gt  console log reason message

User · Answer

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

User · Answer

Since  await  always returns a Promise  simply do an extra  await   inside an async function  to extract the value  test       This alerts  quot hello quot      This is the outer function that wants to get the string result of inner   async function test         var str await await inner        alert str            test     This ia an inner function that can do arbitrary async operations async function inner         return Promise resolve  hello

User · Answer

Let s see the forest first before looking at the trees   There are many informative answers with great details here  I won t repeat any of them  The key to programming in JavaScript is having first the correct mental model of overall execution    Your entry point s  is executed as the result of an event  For example  a script tag with code is loaded into the browser   Accordingly  this is why you may need to be concerned with the readiness of the page to run your code if it requires dom elements to be constructed first  etc   Your code executes to completion--however many asynchronous calls it makes--without executing any of your callbacks  including XHR requests  set timeouts  dom event handlers  etc  Each of those callbacks waiting to be executed will sit in a queue  waiting their turn to be run after other events that fired have all finished execution  Each individual callback to an XHR request  set timeout or dom the event once invoked will then run to completion    The good news is that if you understand this point well  you will never have to worry about race conditions  You should first and foremost thing of how you want to organize your code as essentially the response to different discrete events  and how you want to thread them together into a logical sequence   You can use promises or higher level new async await as tools to that end  or you can roll your own   But you shouldn t use any tactical tools to solve a problem until you are comfortable with the actual problem domain  Draw a map of these dependencies to know what needs to run when  Attempting an ad-hoc approach to all these callbacks is just not going to serve you well

User · Answer

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

User · Answer

ECMAScript 6 has  generators  which allow you to easily program in an asynchronous style   function  myGenerator         const callback   yield      let  response    yield   ajax  https   stackoverflow com    complete  callback        console log  response is    response           examples of other things you can do     yield setTimeout callback  1000       console log  it delayed for 1000ms        while  response statusText      error              response    yield  anotherGenerator              To run the above code you do this   const gen   myGenerator       Create generator gen next       Start it gen next     args    gt  gen next     args        Set its callback function   If you need to target browsers that don t support ES6 you can run the code through Babel or closure-compiler to generate ECMAScript 5   The callback    args are wrapped in an array and destructured when you read them so that the pattern can cope with callbacks that have multiple arguments  For example with node fs   const  err  data    yield fs readFile filePath   utf-8   callback

User · Answer

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    gt        console log joke

User · Answer

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  gt   200  amp  amp  this status  lt  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

User · Answer

Using ES2017 you should have this as the function declaration  async function foo         var response   await   ajax  url              return response      And executing it like this    async function         try           var result   await foo           console log result        catch  e            Or the Promise syntax  foo   then response   gt        console log response      catch error   gt        console log error

User · Answer

This is one of the places which two ways data binding or store concept that s used in many new JavaScript frameworks will work great for you     So if you are using Angular  React or any other frameworks which do two ways data binding or store concept 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 be updated and get assigned to the new value which response 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

User · Answer

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  amp type artist      map  response    gt  response json       toPromise         You can consume that in this way   search         this searchService search this searchField value         then  result    gt        this result   result artists items          catch  error    gt  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

User · Answer

After reading all the responses here and with my experiences  I would like to resume the detail of callback  promise and async await for the asynchronous programming in JavaScript  1  Callback   The fundamental reason for a callback is to run code in response of an event  see the example below   We use callback in JavaScript every time  const body   document getElementsByTagName  body   0   function callback       console log  Hello      body addEventListener  click   callback    But if you must use many nested callbacks in the example below  it will be fairy terrible for the code refactoring  asyncCallOne function callback1       asyncCallTwo function callback2         asyncCallThree function callback3                                 2  Promise   a syntax ES6 - Promise resolves the callback hell issue   const myFirstPromise   new Promise  resolve  reject    gt         We call resolve      when what we were doing asynchronously was successful  and reject      when it failed       In this example  we use setTimeout      to simulate async code        In reality  you will probably be using something like XHR request or an HTML5 API    setTimeout      gt        resolve  quot Success  quot       Yay  Everything went well       250       myFirstPromise    then  res    gt        return res json            then  data    gt        console log data           catch  e    gt        console log e          myFirstPromise is a Promise instance that represents the process of async codes  The resolve function signals that the Promise instance has finished  Afterwards  we can call  then    a chain of  then as you want  and  catch   on the promise instance  then     Runs a callback you pass to it when the promise has fulfilled  catch     Runs a callback you pass to it when something went wrong   3  Async Await   a new syntax ES6 - Await is basically sugar syntax of Promise   Async function provide us with a clean and concise syntax that enables us to write less code to accomplish the same outcome we would get with promises  Async Await looks similar to synchronous code  and synchronous code is much easier to read and write  To catch errors with Async Await  we can use the block try   catch  In here  you don t need to write a chain of  then   of Promise syntax  const getExchangeRate   async      gt      try       const res   await fetch  https   getExchangeRateData        const data   await res json        console log data       catch  err        console error err          getExchangeRate      Conclusion   These are totally the three syntaxs for asynchronous programming in JavaScript that you shoud well understand  So if possible  I recommend that you should use  quot promise quot  or  quot async await quot  for refactoring your asynchronous codes  mostly for XHR requests

User · Answer

Await Request works in ansynchronous way so you can t read data in synchronous way as typical code  However using async await you can create async code which looks close similar to synch code  Code which process request data needs to be wrapped by async function  load in below snippet  and inside it you need to add await keywort before foo    which also use async await    x000D   x000D  async function foo       var url   https   jsonplaceholder typicode com todos 1     var result  await  await fetch url   text       or  json     return result     async function load       var result   await foo      console log result      load    x000D   x000D   x000D   Remember that async function allways wrap  in implicit way  its result into promise  so it return promise

User · Answer

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

User · Answer

It s a very common issue we face while struggling with the  mysteries  of JavaScript  Let me try demystifying this mystery today   Let s start with a simple JavaScript function   function foo       do something   return  wohoo      let bar   foo       bar is  wohoo  here   That s a simple synchronous function call  where each line of code is  finished with its job  before the next one in sequence   and the result is same as expected   Now let s add a bit of twist  by introducing little delay in our function  so that all lines of code are not  finished  in sequence  Thus  it will emulate the asynchronous behavior of function    function foo     setTimeout      gt      return  wohoo        1000      let bar   foo      bar is undefined here   So there you go  that delay just broke the functionality we expected  But what exactly happened   Well  it s actually pretty logical if you look at the code  the function foo    upon execution  returns nothing  thus returned value is undefined   but it does start a timer  which executes a function after 1s to return  wohoo   But as you can see  the value that s assigned to bar is the immediately returned stuff from foo    which is nothing i e  just undefined   So  how do we tackle this issue   Let s ask our function for a PROMISE  Promise is really about what it means   it means that the function guarantees you to provide with any output it gets in future  so let s see it in action for our little problem above     function foo       return new Promise   resolve  reject    gt       I want foo   to PROMISE me something     setTimeout   function              promise is RESOLVED   when execution reaches this line of code        resolve  wohoo     After 1 second  RESOLVE the promise with value  wohoo         1000           let bar    foo   then  res   gt     bar   res   console log bar     will print  wohoo        Thus  the summary is - to tackle the asynchronous functions like ajax based calls etc   you can use a promise to resolve the value  which you intend to return   Thus  in short you resolve value instead of returning  in asynchronous functions   UPDATE  Promises with async await   Apart from using then catch to work with promises  there exists one more approach  The idea is to recognize an asynchronous function and then wait for the promises to resolve  before moving to the next line of code  It s still just the promises under the hood  but with a different syntactical approach  To make things clearer  you can find a comparison below   then catch version   function saveUsers         getUsers          then users   gt             saveSomewhere users                   catch err   gt              console error err                  async await version     async function saveUsers         try          let users   await getUsers           saveSomewhere users               catch err           console error err

User · Answer

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 amp q  22doom 20metal 22     search type playlist amp 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    x000D   x000D  var spotifyAccessToken    YourSpotifyAccessToken   x000D  var console     x000D      log  function s    x000D          document getElementById  console   innerHTML    s     lt br  gt   x000D        x000D    x000D   x000D     Simple XMLHttpRequest x000D     based on https   davidwalsh name xmlhttprequest x000D  SimpleRequest     x000D      call  function what  response    x000D          var request  x000D          if  window XMLHttpRequest       Mozilla  Safari      x000D              request   new XMLHttpRequest    x000D            else if  window ActiveXObject       Internet Explorer x000D              try   x000D                  request   new ActiveXObject  Msxml2 XMLHTTP    x000D                x000D              catch  e    x000D                  try   x000D                    request   new ActiveXObject  Microsoft XMLHTTP    x000D                    catch  e     x000D                x000D            x000D   x000D             State changes x000D          request onreadystatechange   function     x000D              if  request readyState     4       Done x000D                  if  request status     200       Complete x000D                      response request responseText  x000D                    x000D                  else x000D                      response    x000D                x000D            x000D          request open  GET   what  true   x000D          request setRequestHeader  Authorization    Bearer     spotifyAccessToken   x000D          request send null   x000D        x000D    x000D   x000D    PromiseAll x000D  var promiseAll   function items  block  done  fail    x000D      var self   this  x000D      var promises       x000D                     index   0  x000D      items forEach function item    x000D          promises push function item  i    x000D              return new Promise function resolve  reject    x000D                  if  block    x000D                      block apply this   item  index  resolve  reject    x000D                    x000D                  x000D            item    index   x000D          x000D      Promise all promises  then function AcceptHandler results    x000D          if  done  done results   x000D         function ErrorHandler error    x000D          if  fail  fail error   x000D          x000D       promiseAll x000D   x000D     LP  deferred execution block x000D  var ExecutionBlock   function item  index  resolve  reject    x000D      var url    https   api spotify com v1   x000D      url    item  x000D      console log  url   x000D      SimpleRequest call url  function result    x000D          if  result    x000D   x000D              var profileUrls   JSON parse result  playlists items map function item  index    x000D                  return item owner href  x000D                 x000D              resolve profileUrls   x000D            x000D          else   x000D              reject new Error  call error     x000D            x000D         x000D    x000D   x000D  arr     x000D       search type playlist amp q  22doom 20metal 22   x000D       search type playlist amp q Adele  x000D    x000D   x000D  promiseAll arr  function item  index  resolve  reject    x000D      console log  Making request      index        x000D      ExecutionBlock item  index  resolve  reject   x000D     function results       Aggregated results x000D   x000D      console log  All profiles received     results length   x000D        console log JSON stringify results 0   null  2    x000D   x000D            promiseall again x000D   x000D      var ExecutionProfileBlock   function item  index  resolve  reject    x000D          SimpleRequest call item  function result    x000D              if  result    x000D                  var obj   JSON parse result   x000D                  resolve   x000D                      name  obj display name  x000D                      followers  obj followers total  x000D                      url  obj href x000D                      x000D                  result x000D             x000D          ExecutionProfileBlock x000D   x000D      promiseAll results 0   function item  index  resolve  reject    x000D            console log  Making request      index          item  x000D          ExecutionProfileBlock item  index  resolve  reject   x000D         function results       aggregated results x000D          console log  All response received     results length   x000D          console log JSON stringify results  null  2    x000D        x000D   x000D        function error       Error x000D          console log error   x000D         x000D   x000D            x000D   x000D       x000D    function error       Error x000D        console log error   x000D        x000D   lt div id  console    gt  x000D   x000D   x000D    I have extensively discussed this solution here

User · Answer

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  amp  amp  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        Javscript info callback

User · Answer

Short answer  Your foo   method returns immediately  while the  ajax   call executes asynchronously after the function returns  The problem is then how or where to store the results retrieved by the async call once it returns   Several solutions have been given in this thread  Perhaps the easiest way is to pass an object to the foo   method  and to store the results in a member of that object after the async call completes   function foo result          ajax           url                 success  function response                result response   response       Store the async result                      var result     response  null         Object to hold the async result foo result                            Returns before the async completes   Note that the call to foo   will still return nothing useful  However  the result of the async call will now be stored in result response

User · Answer

There is no way by which you can return the result of an ajax response from a function  the reason why this is not possible is because Ajax call    get   or   post    is an async call and calling the function that encapsulates the Ajax call returns even before the response is rendered   In such scenarios  the only option is to return a promise object  which will resolve when the response arrives   There are 2 ways by which the above issue can be resolved  in both cases it makes use of promise   Both the code snippets provided are working including the josn url and can be directly copied to jsfiddle and tested   Option  1  Return the Ajax call directly from the foo method  in the latest version of Jquery ajax call returns a promise object  which can be resolved using a  then function  the input parameter to the  then function is the call back to the resolve function         decalre function foo    function foo url            return   get url              invoke foo function  which returns a promise object      the then function accepts the call back to the resolve function    foo  https   jsonplaceholder typicode com todos 1       then function response           console log response           Option  2 - declare a promise object inside the function and encapsulate the Ajax call within that promise function and return the promise object      function foo1         var promise   new Promise function resolve  reject               ajax       url   https   jsonplaceholder typicode com todos 1       success  function response            console log response            resolve response              return response      lt - I tried that one as well                               return promise           foo1       then function response            console log  Promise Resolved         console log response

User · Answer

Originally  callback were used for asynchronous operations  e g  in the XMLHttpRequest API   Now promise-based APIs like the browser s Fetch API have become the default solution and the nicer async await syntax is supported by all modern browsers and on Node Js  server side    A common scenario - fetching JSON data from the server - can look like this   async function fetchResource url      const res   await fetch url     if   res ok        throw new Error res statusText         return res json        To use it in another function   async function doSomething       try       const data   await fetchResource  https   example test resource 1                   catch  e           handle error                 If you design a modern API  it is strongly recommended to prefer promise-based style over callbacks  If you inherited an API that relies on callbacks  it is possible to wrap it as a promise   function sleep timeout      return new Promise  resolve    gt        setTimeout      gt          resolve           timeout            async function fetchAfterTwoSeconds url      await sleep 2000     return fetchResource url       In Node Js  which historically relied exclusively on callbacks  that technique is so common that they added a helper function called util promisify

User · Answer

Simple code example to convert XHR on Node to async-await  var XMLHttpRequest   require  xmlhttprequest   XMLHttpRequest  var xhttp   new XMLHttpRequest     function xhrWrapWithPromise       return new Promise  resolve  reject    gt        xhttp onreadystatechange   function           if  this readyState    4            if  this status    200              resolve this responseText             else             reject new Error  Couldn t feth data finally                                  xhttp open  GET    https   www w3schools com xml xmlhttp info txt   true       xhttp send               We need to wrap await in Async function so and anonymous IIFE here  async     gt      try       let result   await xhrWrapWithPromise        console log result       catch  error        console log error

User · Answer

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    x000D   x000D     WRONG x000D  var theArray    1  2  3   x000D  var results       x000D  theArray forEach function entry    x000D      doSomethingAsync entry  function result    x000D          results push result   x000D          x000D      x000D  console log  Results    results      E g   using them  returning them  etc  x000D   x000D  function doSomethingAsync value  callback    x000D      console log  Starting async operation for     value   x000D      setTimeout function     x000D          console log  Completing async operation for     value   x000D          callback value   2   x000D         Math floor Math random     200    x000D    x000D   as-console-wrapper   x000D    max-height  100   important  x000D    x000D   x000D   x000D    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    x000D   x000D  var theArray    1  2  3   x000D  var results       x000D  var expecting   theArray length  x000D  theArray forEach function entry  index    x000D      doSomethingAsync entry  function result    x000D          results index    result  x000D          if  --expecting     0    x000D                 Done  x000D              console log  Results    results      E g   using the results x000D            x000D          x000D      x000D   x000D  function doSomethingAsync value  callback    x000D      console log  Starting async operation for     value   x000D      setTimeout function     x000D          console log  Completing async operation for     value   x000D          callback value   2   x000D         Math floor Math random     200    x000D    x000D   as-console-wrapper   x000D    max-height  100   important  x000D    x000D   x000D   x000D     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    x000D   x000D  function doSomethingWith theArray  callback    x000D      var results       x000D      var expecting   theArray length  x000D      theArray forEach function entry  index    x000D          doSomethingAsync entry  function result    x000D              results index    result  x000D              if  --expecting     0    x000D                     Done  x000D                  callback results   x000D                x000D              x000D          x000D    x000D  doSomethingWith  1  2  3   function results    x000D      console log  Results    results   x000D      x000D   x000D  function doSomethingAsync value  callback    x000D      console log  Starting async operation for     value   x000D      setTimeout function     x000D          console log  Completing async operation for     value   x000D          callback value   2   x000D         Math floor Math random     200    x000D    x000D   as-console-wrapper   x000D    max-height  100   important  x000D    x000D   x000D   x000D    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    x000D   x000D  function doSomethingWith theArray    x000D      return new Promise function resolve    x000D          var results       x000D          var expecting   theArray length  x000D          theArray forEach function entry  index    x000D              doSomethingAsync entry  function result    x000D                  results index    result  x000D                  if  --expecting     0    x000D                         Done  x000D                      resolve results   x000D                    x000D                  x000D              x000D          x000D    x000D  doSomethingWith  1  2  3   then function results    x000D      console log  Results    results   x000D      x000D   x000D  function doSomethingAsync value  callback    x000D      console log  Starting async operation for     value   x000D      setTimeout function     x000D          console log  Completing async operation for     value   x000D          callback value   2   x000D         Math floor Math random     200    x000D    x000D   as-console-wrapper   x000D    max-height  100   important  x000D    x000D   x000D   x000D     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              doSomethingWith theArray  then function results        console log  Results    results         If you know that doSomethingAsync will ignore a second and third argument  you can just pass it directly to map  map calls its callback with three arguments  but most people only use the first most of the time    function doSomethingWith theArray        return Promise all theArray map doSomethingAsync      doSomethingWith theArray  then function results        console log  Results    results         Example    x000D   x000D  function doSomethingWith theArray    x000D      return Promise all theArray map doSomethingAsync    x000D    x000D  doSomethingWith  1  2  3   then function results    x000D      console log  Results    results   x000D      x000D   x000D  function doSomethingAsync value    x000D      console log  Starting async operation for     value   x000D      return new Promise function resolve    x000D          setTimeout function     x000D              console log  Completing async operation for     value   x000D              resolve value   2   x000D             Math floor Math random     200    x000D          x000D    x000D   as-console-wrapper   x000D    max-height  100   important  x000D    x000D   x000D   x000D    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  lt  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    x000D   x000D  function doSomethingWith theArray  callback    x000D      var results       x000D      doOne 0   x000D      function doOne index    x000D          if  index  lt  theArray length    x000D              doSomethingAsync theArray index   function result    x000D                  results push result   x000D                  doOne index   1   x000D                  x000D            else   x000D                 Done  x000D              callback results   x000D            x000D        x000D    x000D  doSomethingWith  1  2  3   function results    x000D      console log  Results    results   x000D      x000D   x000D  function doSomethingAsync value  callback    x000D      console log  Starting async operation for     value   x000D      setTimeout function     x000D          console log  Completing async operation for     value   x000D          callback value   2   x000D         Math floor Math random     200    x000D    x000D   as-console-wrapper   x000D    max-height  100   important  x000D    x000D   x000D   x000D     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   gt        console log  Results    results         Example    x000D   x000D  async function doSomethingWith theArray    x000D      const results       x000D      for  const entry of theArray    x000D          results push await doSomethingAsync entry    x000D        x000D      return results  x000D    x000D  doSomethingWith  1  2  3   then function results    x000D      console log  Results    results   x000D      x000D   x000D  function doSomethingAsync value    x000D      console log  Starting async operation for     value   x000D      return new Promise function resolve    x000D          setTimeout function     x000D              console log  Completing async operation for     value   x000D              resolve value   2   x000D             Math floor Math random     200    x000D          x000D    x000D   as-console-wrapper   x000D    max-height  100   important  x000D    x000D   x000D   x000D    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    x000D   x000D  function doSomethingWith theArray    x000D      return theArray reduce function p  entry    x000D          return p then function results    x000D              return doSomethingAsync entry  then function result    x000D                  results push result   x000D                  return results  x000D                  x000D              x000D         Promise resolve       x000D    x000D  doSomethingWith  1  2  3   then function results    x000D      console log  Results    results   x000D      x000D   x000D  function doSomethingAsync value    x000D      console log  Starting async operation for     value   x000D      return new Promise function resolve    x000D          setTimeout function     x000D              console log  Completing async operation for     value   x000D              resolve value   2   x000D             Math floor Math random     200    x000D          x000D    x000D   as-console-wrapper   x000D    max-height  100   important  x000D    x000D   x000D   x000D       which is less cumbersome with ES2015  arrow functions   function doSomethingWith theArray        return theArray reduce  p  entry    gt  p then results   gt  doSomethingAsync entry  then result   gt            results push result           return results           Promise resolve         doSomethingWith theArray  then results   gt        console log  Results    results         Example    x000D   x000D  function doSomethingWith theArray    x000D      return theArray reduce  p  entry    gt  p then results   gt  doSomethingAsync entry  then result   gt    x000D          results push result   x000D          return results  x000D           Promise resolve       x000D    x000D  doSomethingWith  1  2  3   then function results    x000D      console log  Results    results   x000D      x000D   x000D  function doSomethingAsync value    x000D      console log  Starting async operation for     value   x000D      return new Promise function resolve    x000D          setTimeout function     x000D              console log  Completing async operation for     value   x000D              resolve value   2   x000D             Math floor Math random     200    x000D          x000D    x000D   as-console-wrapper   x000D    max-height  100   important  x000D    x000D   x000D   x000D

User · Answer

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

User · Answer

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    gt        console log joke

User · Answer

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    quot  echo json quot        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  quot Explanation of the problem quot  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  quot 5 quot  to the screen   Fiddle   Possible solutions There are basically two ways how to solve this   Make the AJAX call synchronous  lets call it SJAX   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    quot  echo json quot        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

User · Answer

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    x000D   x000D  function synchronousCode     x000D   x000D      var getURL   function url    x000D          return window fetch url  data text   data  x000D         x000D       x000D      var url    https   ajax googleapis com ajax libs jquery 2 0 0 jquery min js   x000D      console log  received bytes   getURL url  length   x000D       x000D     x000D   x000D  nsynjs run synchronousCode    function    x000D      console log  synchronousCode done    x000D      x000D   lt script src  https   rawgit com amaksr nsynjs master nsynjs js  gt  lt  script gt  x000D   x000D   x000D    If underlying function is not promisified  Step 1  Wrap function with callback into nsynjs-aware wrapper  if it has promisified version  you can skip this step    var ajaxGet   function  ctx url        var res           var ex        ajax url       done function  data            res data   data              fail function e            ex   e              always function             ctx resume ex               return res     ajaxGet nsynjsHasCallback   true    Step 2  Put synchronous logic into function   function process         console log  got data    ajaxGet nsynjsCtx   data file1 json   data       Step 3  Run function in synchronous manner via nsynjs   nsynjs run process this function          console log  synchronous function finished          Nsynjs will evaluate all operators and expressions step-by-step  pausing execution in case if result of some slow function is not ready   More examples here  https   github com amaksr nsynjs tree master examples

User · Answer

use of async await with a transpilers like Babel to get it working in older browsers  You   ll also have to install this Babel preset and polyfill from npm  npm i -D babel-preset-env babel-polyfill   function getData ajaxurl       return   ajax       url  ajaxurl      type   GET             async test       try       const res   await getData  https   api icndb com jokes random       console log res      catch err        console log err          test      or the  then callback is just another way to write the same logic   getData ajaxurl  then function res        console log res

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

async  false I solved by setting async to false and restructure my ajax call   I set global function called sendRequest type  url  data  with three parameters to be called every time everywhere function sendRequest type  url  data        let returnValue   null        ajax           url  url          type  type          async  false          data  data          dataType   json           success  function  resp                returnValue   resp                        return returnValue      Now call function let password      quot  password quot   val            let email      quot  email quot   val            let data                 email  email              password  password                     let  resp    sendRequest  POST    http   localhost signin     quot   data           console log resp     Important Note in code is    async  false

[javascript] How do I return the response from an asynchronous call?

Here are some approaches to work with asynchronous requests:

Example: jQuery deferred implementation to work with multiple requests

Examples related to javascript

Examples related to jquery

Examples related to ajax

Examples related to asynchronous