vue3中axios同步请求数据操作问题？

Question

问题描述：
    我需要在vue3中请求多个接口，然后将返回数据进一步处理后，保存成变量数据赋值给echarts地图封装，最终再用echarts.setOption 进行展示地图；
    且这些数据在地图下钻时候还要拿出来进行筛选过滤；
    但，vue3中整体机制都是异步的，导致封装的option时候的数据都是空的，处理进一步处理时候也是空的；
    请求返回的对象用 .then() 是可以拿到数据，但他是异步的无法满足需求，

求问这种情况改如何处理？

const loadJSONData = async (path:string) =>{
    let _data = await axios.get(path).then((res) =>{
        if(res && res.data){
            return res.data
        }
        return undefined;
    }).catch(e =>{
        return undefined
    })
    return _data;
}

 let data1 =loadJSONData(path)
 let data2 =loadJSONData(path)
 let data3 =loadJSONData(path)

//数据封装处理
...

let option={
    ...
}
mychart.setOption(option)

以上loadJSONData方法内部是同步的，但方法体外部调用，外部依然是异步的，没办法直接保存数据，供与下方调用处理

测试过直接把setup方法前追加上 async，然后变量在获取数据时候在方法前追加 await (setup前不追加async，此处无法使用await)
 let data1 = await loadJSONData(path)

但此种方式，发现echarts地图直接就不展示了，页面也没有任何错，去掉setup前的async就没问题

求协助，感谢

Answer 1

空数据时作降级处理，异步的请求返回数据后更新state，新的state驱动页面重新渲染。

Answer 2

async setup() 必须与 Suspense 内置组件组合使用，Suspense 目前还是处于实验阶段的特性，会在将来的版本中稳定。
https://staging-cn.vuejs.org/...

可以用Promise.all等待三个请求返回再继续执行后面的操作