一些有关异步的需求实现

108 阅读1分钟

vue中的keep-alive缓存,目前一个需求是侧边菜单跳转时候不缓存,顶部页签切换时候缓存

<keep-alive :include="bool?keepList:[]">
    <router-view/>
</keep-alive>
this.bool=false;
this.$nextTick(()=>{
    this.bool=true;
})

菜单跳转的时候click直接触发回调,利用了router跳转的异步行为

一个输入框失焦后调取接口,然后点击提交的时候需要这个接口返回的数据当做参数,如何解决失焦接口的异步问题

建立一个轮询

get(){
  setTimeout(()=> this.count=10, 2000)
},
send(){
  let inter = setInterval(() => {
    if (this.count) {
      clearInterval(inter)
      this.count = null
      // 此处调用 提交接口
    } else {
      console.log('loading!!!')
    }
  }, 100)
}

完美解决方案

get(){
  setTimeout(()=> {
    this.count=10
    if (this.loading) {
      // 此处调用 提交接口
    }
  }, 2000)
},
send(){
  this.loading = true
  if (this.count) {
    this.count = null
    // 此处调用 提交接口 接口then里面将loading设为false
  }
}