前端如何防止同时重复地发送请求

        前端开发过程中发送网络请求时,没等接收到请求时,用户再次触发发送请求时间,就会造成高并发。
        再比如做页面滚动加载更多时,页面滑动到底部时,会多次触发请求事件。
        这里我将使用高阶函数在不修改之前的请求方法和触发事件等情况下,来优雅的解决。
        以下是模拟触发事件和网络请求的代码。每点击一次按钮后,都会触发一次request方法。

// html 代码
    <button id="btn"></button>

    // js 代码
    // 绑定点击事件
    document.getElementById("btn").onclick = function(){
        request(Date.now());
    };

    // 请求函数
    function request(time){
        console.log("正在发送请求");
        return new Promise((resolve)=>{
            setTimeout(()=>{
                console.log("成功获取返回数据")
                resolve({code: 0, result: time});
            }, 3000);
        })
    }
    
    下面,创建一个新的函数命名为wrappedRequest, 它接收一个函数,判断这个函数是否被执行了,如果执行了则不会再执行此函数。若没有执行,则继续执行次函数。
    // 包裹请求函数
    function wrappedRequest(func){
  // 给func添加一个isRequest属性,用来标记是否发送请求了,如果为true,则不再进行发送请求
        if(func.isRequest){
            // 这里返回一个空的promise函数,否则会报错
            return () => new Promise(()=>{});
        }
    
        // 没有发送请求时,这里需要发送请求,并且将isRequest标记为true
        func.isRequest = true;
        return function(){
            func.apply(this, arguments).then(resp => {
                // 接收到请求后,将isRequest标记为false
                func.isRequest = false;
                // 返回请求结果
                return resp;
            })
        }
    }
    
    // 绑定点击事件
    document.getElementById("btn").onclick = function(){
        // 在这里不过点击了多少次,只会请求一次,直到返回结果。
        wrappedRequest(request)(Date.now());
    };

  • 7
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
前端可以通过以下几种方式防止用户重复提交: 1. 禁用提交按钮:在表单被提交后,立即禁用提交按钮,防止用户多次点击提交按钮。可以通过以下代码实现: ```javascript document.querySelector('form').addEventListener('submit', function(event) { event.preventDefault(); document.querySelector('button[type="submit"]').setAttribute('disabled', true); // ... }); ``` 2. 显示加载动画:在表单被提交后,显示一个加载动画来提示用户正在处理请求防止用户多次点击提交按钮。可以通过以下代码实现: ```javascript document.querySelector('form').addEventListener('submit', function(event) { event.preventDefault(); document.querySelector('.loading').style.display = 'block'; // ... }); ``` 3. 防抖函数:在用户频繁点击提交按钮时,使用防抖函数延迟请求发送。可以通过以下代码实现: ```javascript function debounce(fn, delay) { let timer; return function() { clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, arguments); }, delay); } } const submitForm = debounce(function() { document.querySelector('form').submit(); }, 1000); document.querySelector('button[type="submit"]').addEventListener('click', function(event) { event.preventDefault(); submitForm(); }); ``` 以上是前端防止用户重复提交的一些方法,但这些方法只是针对前端的处理,为了保证数据的安全和正确性,后端也需要进行相应的处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

TonyH2002

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值