title: How to await an async call in JavaScript in a synchronous function?
body: <p>I recently had to correct security issues in a web-application (that I didn't create). 
  The security problem was, it was using non-http-only cookies. 
  So I had to set the session-cookie http-only, which means you can't read (and set) the cookie's value anymore from javascript.
  So far so seamingly easy. </p>
  
  <p>The deeper problem was, the web-application used </p>
  
  <pre><code>JSON.parse(readCookie(cookieName)).some_value
  </code></pre>
  
  <p><strong>on a million places</strong>.</p>
  
  <p>So in order to not have to re-write "a million lines of code", I had to create an ajax-endpoint that gave me the http-cookie's content as JSON and rewrite 
  readCookie to use <strong>SYNCHRONOUS</strong> ajax requests (instead of reading the cookie), because the rest of the horrible code expects 
  readCookie to be synchronous at these million places, because reading a cookie is synchronous. </p>
  
  <p>The problem now is, I get a lot of </p>
  
  <blockquote>
    <p>Synchronous XMLHttpRequest on the main thread is deprecated because of
    its detrimental effects to the end user's experience.  For more help,
    check <a href="https://xhr.spec.whatwg.org/" rel="noreferrer">https://xhr.spec.whatwg.org/</a>.</p>
  </blockquote>
  
  <p>which spams the debug console, let alone the possibility someone decides to remove this functionality. </p>
  
  <p>I am therefore looking into the new ES async/await keywords, to see if that could help somehow in making a asynchronous ajax-request synchronously (i know I have to use wrappers for IE 11). </p>
  
  <p>So far, I read these pages<br />
  <a href="https://www.twilio.com/blog/2015/10/asyncawait-the-hero-javascript-deserved.html" rel="noreferrer">https://www.twilio.com/blog/2015/10/asyncawait-the-hero-javascript-deserved.html</a><br />
  <a href="https://pouchdb.com/2015/03/05/taming-the-async-beast-with-es7.html" rel="noreferrer">https://pouchdb.com/2015/03/05/taming-the-async-beast-with-es7.html</a><br />
  <a href="https://jakearchibald.com/2014/es7-async-functions/" rel="noreferrer">https://jakearchibald.com/2014/es7-async-functions/</a><br />
  <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function</a>*<br /></p>
  
  <p>but it looks like all the new async stuff seems to only cater to the problem of writing asynchronous code easier, not enabling interop between asynchronous and existing synchronous code. Using the information I read, I can now await the result of an asynchronous ajax-call like it was synchronous, 
  but the problem is - await is only allowed in async-methods...
  Which means even if I can await the result like it was synchronous, the getCookie method would still have to be async, which makes all the stuff appear to be completely pointless (unless your entire code would-be async, which it certainly isn't when you don't start from scratch)...</p>
  
  <p>I can't seem to find any information on how to interop between synchronous and asynchronous code. </p>
  
  <p>For example, in C#, I can call an async-method from a synchronous context with .Result, e.g. </p>
  
  <pre><code> AsyncContext.RunTask(MyAsyncMethod).Result;
  </code></pre>
  
  <p>or easier but less deadlock-safe like </p>
  
  <pre><code>MyAsyncMethod(args).Result;
  </code></pre>
  
  <p>Is there any way to achieve the same in JavaScript ? </p>
  
  <p>It seems to make little sense to spread async around, when the rest of the codebase is synchronous, without any possibility of interop... 
  Is there really still no way to achieve this in JavaScript in 2017 AD ? </p>
  
  <p><strong>I emphasize again</strong>: <br />
  <strong>I know</strong> how I can make a synchronous ajax-call, and <strong>I know</strong> how to use async ajax calls with callbacks and/or promises.
  <br />
  But what I'm unable to figure out is how to synchronize an async-ajax-call <strong>(no callback)</strong> so it can be used from code that expects to be run <strong>synchronously</strong> (in "a million places") !</p>
  
  <p>This is what I have tried so far: <br />
  <em>(Note that whether I use</em> <code>loadQuote</code> <em>or</em> <code>main</code><em>, the text</em> "Ron once said" <em>still appears first in the debug-console, which should not be the case if the <strong>asynchronous</strong> ajax-call had been resolved <strong>synchronously</strong>)</em></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /&gt;
  
      &lt;meta http-equiv="cache-control" content="max-age=0" /&gt;
      &lt;meta http-equiv="cache-control" content="no-cache" /&gt;
      &lt;meta http-equiv="expires" content="0" /&gt;
      &lt;meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /&gt;
      &lt;meta http-equiv="pragma" content="no-cache" /&gt;
  
      &lt;meta charset="utf-8" /&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  
      &lt;meta http-equiv="Content-Language" content="en" /&gt;
      &lt;meta name="viewport" content="width=device-width,initial-scale=1" /&gt;
  
      &lt;meta name="google" value="notranslate" /&gt;
  
  
      &lt;!--
      &lt;meta name="author" content="name" /&gt;
      &lt;meta name="description" content="description here" /&gt;
      &lt;meta name="keywords" content="keywords,here" /&gt;
  
      &lt;link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon" /&gt;
      &lt;link rel="stylesheet" href="stylesheet.css" type="text/css" /&gt;
      --&gt;
  
      &lt;title&gt;Title&lt;/title&gt;
  
      &lt;style type="text/css" media="all"&gt;
          body
          {
              background-color: #0c70b4;
              color: #546775;
              font: normal 400 18px "PT Sans", sans-serif;
              -webkit-font-smoothing: antialiased;
          }
      &lt;/style&gt;
  
  
      &lt;script type="text/javascript"&gt;
          &lt;!-- 
          // http://localhost:57566/foobar/ajax/json.ashx
  
          var ajax = {};
          ajax.x = function () {
              if (typeof XMLHttpRequest !== 'undefined') {
                  return new XMLHttpRequest();
              }
              var versions = [
                  "MSXML2.XmlHttp.6.0",
                  "MSXML2.XmlHttp.5.0",
                  "MSXML2.XmlHttp.4.0",
                  "MSXML2.XmlHttp.3.0",
                  "MSXML2.XmlHttp.2.0",
                  "Microsoft.XmlHttp"
              ];
  
              var xhr;
              for (var i = 0; i &lt; versions.length; i++) {
                  try {
                      xhr = new ActiveXObject(versions[i]);
                      break;
                  } catch (e) {
                  }
              }
              return xhr;
          };
  
          ajax.send = function (url, callback, method, data, async) {
              if (async === undefined) {
                  async = true;
              }
              var x = ajax.x();
              x.open(method, url, async);
              x.onreadystatechange = function () {
                  if (x.readyState == 4) {
                      callback(x.responseText)
                  }
              };
              if (method == 'POST') {
                  x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
              }
              x.send(data)
          };
  
          ajax.get = function (url, data, callback, async) {
              var query = [];
              for (var key in data) {
                  query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
              }
              ajax.send(url + (query.length ? '?' + query.join('&amp;') : ''), callback, 'GET', null, async)
          };
  
          ajax.post = function (url, data, callback, async) {
              var query = [];
              for (var key in data) {
                  query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
              }
              ajax.send(url, callback, 'POST', query.join('&amp;'), async)
          };
  
  
          ///////////
  
  
  
          function testAjaxCall() {
              ajax.get("./ajax/json.ashx", null, function (bError, strMessage, iStatus)
                  {
                      console.log("args:", arguments);
  
                      console.log("Error:", bError);
                      console.log("Message:", strMessage);
                      console.log("Status:", iStatus);
                  }
                  , true
              );
  
          }
          --&gt;
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;script type="text/javascript"&gt;
  
          function getQuote() {
              var quote;
  
              return new Promise(function (resolve, reject) {
  
                  ajax.get("./ajax/json.ashx", null, function (bError, strMessage, iStatus) {
  
                      // console.log("args:", arguments);
  
                      // console.log("Error:", bError);
                      // console.log("Message:", strMessage);
                      // console.log("Status:", iStatus);
  
  
                      quote = bError;
                      resolve(quote)
  
                  }, true);
  
  
                  /*
                  request('./ajax/json.ashx', function (error, response, body) {
                      quote = body;
  
                      resolve(quote);
                  });
                  */
  
              });
  
          }
  
          async function main() {
              var quote = await getQuote();
              console.log("quote: ", quote);
          }
  
          function myGetQuote() {
              var quote = async function () { return await getQuote(); };
  
              console.log("quote: ", quote);
  
              return quote;
          }
  
          function spawn(generatorFunc) {
              function continuer(verb, arg) {
                  var result;
                  try {
                      result = generator[verb](arg);
                  } catch (err) {
                      return Promise.reject(err);
                  }
                  if (result.done) {
                      return result.value;
                  } else {
                      return Promise.resolve(result.value).then(onFulfilled, onRejected);
                  }
              }
              var generator = generatorFunc();
              var onFulfilled = continuer.bind(continuer, "next");
              var onRejected = continuer.bind(continuer, "throw");
              return onFulfilled();
          }
  
  
          function loadQuote() 
          {
              return spawn(function *() {
                  try {
                      let story = yield getQuote();
  
                      console.log("story:", story);
                      // addHtmlToPage(story.heading);
                      // for (let chapter of story.chapterURLs.map(getJSON)) { addHtmlToPage((yield chapter).html); } addTextToPage("All done");
                  } catch (err) {
                      //addTextToPage("Argh, broken: " + err.message);
                      console.log("Argh, broken: " + err.message);
                  }
                  //document.querySelector('.spinner').style.display = 'none';
              });
          }
  
  
  
          function autorun()
          {           
              console.clear();    
              // main();
              // main();
              loadQuote();
  
              //var quote = myGetQuote();
  
              // console.log("quote: ", quote);
              console.log('Ron once said,');
  
          }
  
          if (document.addEventListener) document.addEventListener("DOMContentLoaded", autorun, false);
          else if (document.attachEvent) document.attachEvent("onreadystatechange", autorun);
          else window.onload = autorun;
      &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>