我应该坚持同步XML调用而不是操纵异步调用吗？

Question

如果标题含糊不清，我很抱歉，但我会在这里总结一下。

我已经为html页面设置了一个XMML请求来获取它所呈现的json对象，代码如下：

        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;

这里的一切都运作良好。然而，在网上搜索;我看到同步XMLHttpRequest被弃用/不应该使用/ etc。等

所以我试图按如下方式建立一个fetch api（）调用

fetch('https://api.teleport.org/api/urban_areas/slug:'+this.props.newCitySlug+'/images/')
          .then((response) => response.json())
          .then((responseData) => {
            image_url = responseData.photos[0].image.web;
})

fetch（）api调用确实有效，代码确实看起来更干净但是我的页面在fetch（）完成之前呈现（即页面加载并且没有显示图像）。

我应该坚持使用同步HttpRequest调用吗？否则我不确定如何使用异步fetch（）调用并在页面加载之前存储数据。