【前端】tab切换网络加载慢时数据出错?

        我们在做tab切换时,有时数据加载的比较慢,或者网络环境不好时,数据返回时仍处于pending状态,再次点击tab切换时,由于第一次点击时数据加载慢,又点击其他tab或返回第一个tab时数据会把第二次tab的数据也push到data里面

【前端】tab切换网络加载慢时数据出错?_第1张图片

 就比如做一个这样的快速切换

【前端】tab切换网络加载慢时数据出错?_第2张图片

错误展示

         怎么样解决呢?其实方法有很多,你可以使用缓存组件或取消pending状态的请求,还有请求时可以做请求标识。由于我的需求样式差不多且tab切换比较少就没有做缓存。

今天这里呢就是请求时做请求标识

        首先在data里写一个初始值

                

        然后请求时把data里面的初始值加一赋给一个新的变量,然后把变量值再次赋给初始值(这里是更新初始值,不然影响一下次的判断)

发起请求数据之后就可以判断初始值是否和新的变量值相同,等到两个值相同时在把数据push进去就好了。

        ​​​​​​​        

 

 

你可能感兴趣的:(javascript,vue.js,前端,html,es6,html5)