vue小技巧:性能优化使用篇 =＞ 路由/tab切换取消当前页面异步请求

//tab在前端是非常常见的一个组件, 在vue里面, 结合了双向绑定原理, 更是将页面无感刷新提升到了极致
//假设每个tab选项都需要请求一次接口(做一次异步操作)
//但是假如我们有一个手速超快的人(我摊牌了, 就是我), 他在一秒钟内能切换3次tab选项, 也就是请求了三次接口,
然后他又生活在山旮旯里面, 网络请求要3 秒后才能返回结果,
他脾气不好, 来回点了9次, 才会有第一个请求的数据返回
试问如何保证返回的数据是最后一次切换后的数据

一、防抖

//不多做介绍, 防抖从原理和可行性上分析, 是可以实现的, 但是需要一个前提 => 网络稳定
网络波动过大 是会出现 第二次请求先返回结果, 第一次请求后返回的结果, 只是概率小了点
分析原理:
1、利用定时器, 对于用户在短时间内频繁操作只保留最后一次事件

**优点: 1、无论用户规定时间内操作多少次, 都将只有一个请求发生 **
缺点: 1、用户比较狡猾, 在规定时间外多发送了一次请求, 然后他的网络波动还大 这时候仍然会出现显示数据异常的结果

二、axios取消请求发送

//首先要说明的无论是用vuex 还是 mixin组件混入 都可以实现该需求, 下面会放两份代码(建议项目中用了vuex, 就用vuex引入, 没有的话可以参考mixin混入)
分析原理:
1、利用axios可取消请求, 集合所有请求, 当切换路由或tab选项时, 触发取消所有请求方法。

优点: 1、优化网络请求, 提升页面响应速度 2、结果正确无误返回
缺点: 1、需要一个集合, 占点内存(实在找不到缺点了) 2、需要自己在多个文件中配置一下