vue中tab切换时请求数据重复问题
快速点击tab切换时,上一个tab的请求,会在当前的tab的list中处理,导致数据不对
·
问题场景
切换tab时,会请求列表的接口,在then中进行了数据处理(添加到list后面)
ps:list在不同的tab中时同一个
快速点击tab切换时,上一个tab的请求,会在当前的tab的list中处理,导致数据不对
例如:
两个tab:成功列表 & 失败列表
点击成功列表后,且请求未返回时,点击失败列表:这个时候,失败列表中会出现成功列表的数据
解决方案:
大概的代码意思,不能直接复制运行的,参考意思就行
data() {
return {
random: new Date().valueOf(),
activeTab: 0,
list: []
};
}
watch: {
activeTab: {
handler(val) {
this.random = new Date().valueOf()
// 请求list
this.getList()
},
},
}
methods: {
getList() {
const random = this.random
api().then((list) => {
// 判断处理数据时的tab是不是没变过
if (this.random != random) return
this.list = this.list.concat(list)
})
}
}
这个只是想到的一个比较简单偷懒的方法,并不是项目中实现的最优方案。结合自己项目情况考虑为好。
axios 取消请求相对而言,比较麻烦,懒,小项目不想写
更多推荐
已为社区贡献4条内容
所有评论(0)