title: Async/Await, returned variable is undefined after XHR request
body: <p>I am attempting to get a public IP address from an API and then having that IP to be used inside another function (<code>ninjaUniqueVisitorRequest()</code>).</p>
  
  <p>I have the following code:</p>
  
  <pre><code>function ninjaGetIp() {
      var ipRequest = new XMLHttpRequest();
      ipRequest.open('GET', "https://api.ipify.org?format=jsonp=", true);
      ipRequest.send();
      ipRequest.onload = function () {
          if (ipRequest.status &gt;= 200 &amp;&amp; ipRequest.status &lt; 400) { // If response is all good...
              return ipRequest.responseText;
          } else {
              console.log('There was an error retrieving the public IP.');
              return '127.0.0.1'; 
          }
      }
  }
  
  async function ninjaUniqueVisitorRequest() {
      // var ninjaSiteUuid = ninjaGetSiteUuid();
      // var ninjaFingerprint = await ninjaGetFingerprint();
      var ninjaPublicIp = await ninjaGetIp();
      console.log(ninjaPublicIp);
  }
  </code></pre>
  
  <p>Currently, when I run <code>ninjaUniqueVisitorRequest();</code> the <code>console.log(ninjaPublicIp);</code> returns <code>undefined</code>. </p>
  
  <p>I kind of understand that it returns straight away before the request has been made however thats what I thought I was fixing by using <code>async/await</code>. </p>
  
  <p>Any ideas are appreciated!
  PHP guy over here, go easy on me.</p>