在使用异步请求后把值存入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') ?? '[]')
})

技术有限,欢迎评论指正

posted @ 2023-08-08 17:38  Morning枫  阅读(196)  评论(0)    收藏  举报