title: Should I stick to synchronous XML call instead of manipulating an async call?
body: <p>I apologize if the title was vague but I'll try and summarize here.</p>
  
  <p>I've set up an XMML request to an html page to GET the json object that it presents and the code is as follows: </p>
  
  <pre><code>        var xhReq = new XMLHttpRequest();
          xhReq.open("GET", 'https://api.teleport.org/api/urban_areas/slug:'+this.props.newCitySlug+'/images/', false);
          xhReq.send(null);
          var jsonObject = JSON.parse(xhReq.responseText);
          image_url = jsonObject.photos[0].image.web;
  </code></pre>
  
  <p>Everything works well here. However scouring the web; I'm seeing that Synchronous XMLHttpRequest's are deprecated/should not be used/etc. etc.</p>
  
  <p>So I've attempted to establish a fetch api() call as follows</p>
  
  <pre><code>fetch('https://api.teleport.org/api/urban_areas/slug:'+this.props.newCitySlug+'/images/')
            .then((response) =&gt; response.json())
            .then((responseData) =&gt; {
              image_url = responseData.photos[0].image.web;
  })
  </code></pre>
  
  <p>The fetch() api call does work and the code does seem cleaner however my page is rendered prior to the fetch() being complete (i.e. page loads and no image is displayed).</p>
  
  <p>Should I stick with using a synchronous HttpRequest call? Otherwise I'm not sure as to how to use the async fetch() call AND store the data prior to the page loading.</p>