前端防止过多请求的两种办法,标志变量和防抖节流,。

news/2024/7/11 1:25:30 标签: vue.js, javascript, jquery

我们请求数据的时候特定的情况下有时候会发生请求很多次数据的情况,或者对恶意请求数据的攻击作出相对处理,这有两种办法解决

第一种就是很简单的办法设置标变量 (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);
        }
    }
}

http://www.niftyadmin.cn/n/1845907.html

相关文章

[React框架学习笔记]两天速成React之第一天

React学习笔记创建一个react工程npx入口文件class类组件第一个react组件组件中一些html的一些小区别for循环代码简化与扩展安装组件进阶之小技巧使用statesetState的三种方式函数的传参function函数组件特点useStateuseEffect组件传参父传子子传父contextuseContext创建一个rea…

vue动态绑定绑定多个类名。

:class“[‘text-uppercase text-center’,{‘category-active’:categoryFlag }]” categoryFlag 是你定义的变量名称&#xff0c;判断当前类名是否生效。 <p :class"[classA,classB]">动态绑定多个类名</p> <!-- 动态绑定A、B两个类名&#xff0c;并…

[React框架学习笔记]两天速成 React之第二天

React框架学习笔记写在前面受控组件和不受控组件受控组件不受控组件memo子组件有逻辑处理需要结合useCallback使用useMemo状态管理React-Redux仓库与reducer创建reducer.jsindex.js提供器与连接器提供器连接器状态映射dispatch映射换成switch写法路由路由配置路由显示使用link跳…

Android -- 自定义权限

在android系统的安全模型中&#xff0c;应用程序在默认的情况下不可以执行任何对其他应用程序&#xff0c;系统或者用户带来负面影响的操作。如果应用需要执行某些操作&#xff0c;就需要声明使用这个操作对应的权限。 &#xff08;在manifest文件中 添加标记&#xff09;。 ap…

element没有数据表格显示的提示语句

<el-table<template slot"empty"><div style"height:92px;line-height:92px;">没有数据时,你想展示的内容</div></template> </el-table>直接复制粘贴到表格里面第一行即可

《Flutter 控件大全》第二十一个:Card

如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。Card是material风格的卡片控件,…

最新型塑料加热就能100%回收 全环保

2019独角兽企业重金招聘Python工程师标准>>> 最近&#xff0c;美国研究人员开发出一种新型塑料&#xff0c;塑胶后可转换成原来的分子状态的加热一小时。换句话说&#xff0c;这种新材料可以完全回收&#xff0c;不含有油和可以分解有机物&#xff0c;它可以改变我们…

《Flutter 控件大全》第二十二个:Checkbox

如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。Checkbox Checkbox是勾选框控件…