Wait for async calls in javascript

[Azim-Palmer]

I'd like to augment the data with data returned from external fetch calls, a very cutdown example :

(async () => { 
    const res = await fetch('http://ip-api.com/json/99.999.9.999')
    data.data = res
})()

However the output doesn't wait for the async code to resolve.

If I change the data variable outside of an async block the panel shows the expected result

    data.data = []

How would I go about doing this? It can't use the static data source.

Workaround

Making the calls synchronous works

var a = new XMLHttpRequest();
a.open('GET', 'http://ip-api.com/json/99.999.9.999', false)
a.send(null);
data.data = JSON.parse(a.responseText)

[mikhail-vl]

@Azim-Palmer Panel runs synchronously.

To do async update, just create a div element and then update its content after call finished.

[mikhail-vl]

@Azim-Palmer Why you can't use Static, JSON API or Infinity Data Source to get the data before render the panel?