我们请求数据的时候特定的情况下有时候会发生请求很多次数据的情况,或者对恶意请求数据的攻击作出相对处理,这有两种办法解决
。
第一种就是很简单的办法设置标变量 (vue写法,纯js的写成局部变量即可)
data(){
return{
flag:true // 设置为true第一次请求允许进来
}
}
// 这种方法就是让第一次请求进来后把标志变量设为false,然后在没有得到数据之前是不能再次进去请求接口的。
getList(){
if(this.flag==false){
return;
}
this.flag = false; // 设为false 是为了防止再次进入接口。
this.axios.get({你的地址}).then(res=>{
this.list = res.data.data;
this.flag = true // 只有在第一次请求到数据后才能设为true
})
}
第二种方式就是就是一种比较高级的形式 防抖和节流,原理大致就是用一个频率来判断发送多少次请求。
/**
- @desc 函数防抖
- @param func 函数
- @param wait 延迟执行毫秒数
- @param immediate true 表立即执行,false 表非立即执行
*/
function debounce(func,wait,immediate) {
let timeout;
return function () {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
if (immediate) {
var callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, wait)
if (callNow) func.apply(context, args)
}
else {
timeout = setTimeout(function(){
func.apply(context, args)
}, wait);
}
}
}