在使用异步请求后把值存入localstore并且在其他变量中首次通过localstore获取不到值

问题

写了一个方法A，里面有使用AXIOS进行请求（异步），并且把请求后的数据存入localstore，此方法在onMounted中进行调用，之后在其他地方使用时（通过读取localstore来获取值并给变量赋值），发现首次调用是获取不了值进行展示的，刷新后或者切换页面回来后就是按预期展示了。

推断

方法A是异步执行的，但是localstore是同步的，因而在给使用的变量赋值的时候，有可能出现方法A还没有完成数据的获取和存储，但是你已经需要去获取并且使用数据了（通过localstore），因此导致了首次获取不到数据，之后就可以正常获取了

解决

把调用作为A方法的一部分，在A方法执行后才继续调用

代码

const ranks_type
async FunctionA(){
  await api.get('/test').then((res: any) => {
    localStorage.removeItem('ranks_type')
    localStorage.setItem('ranks_type', res.data.get_time)
  })
}
onMounted(() => {
  //  问题写法
  FunctionA()
  ranks_type.value = JSON.parse(localStorage.getItem('ranks_type') ?? '[]')

  //  解决写法
  Function A().then(() => {
    ranks_type.value = JSON.parse(localStorage.getItem('ranks_type') ?? '[]')
})

技术有限，欢迎评论指正