JS前端无侵入实现防止重复提交请求技术

最近在代码发布测试的过程中,我发现有些请求非常的消耗服务器资源,而系统测试人员因为响应太慢而不停的点击请求。我是很看不惯系统存在不顺眼的问题,做事喜欢精益求精,也很喜欢和别人争论技术,有时候硬要争得你死我活。

实在看不下去系统存在这个问题,下定决心好好整改一波,我们系统几乎都是使用Ajax技术发请求,使用的是针对我们系统特点对jQuery的post方法进行了封装的newpost方法,这个方法扩展了异常响应,登陆超时,token验证,加载时渲染等自动完成功能,参数不变,也是我写的。由于系统模块很多,功能很强大,代码也很多,为了统一使用此方法,花了不少时间将post修改成newpost。这次为了限制请求次数这个小功能,我请示了领导并把初步的方案说与他听,他同意了我做此次修改。

我调查了几个有防止请求重发控制的页面,几乎都是发起请求后到响应这段时间对按钮置灰警用处理,这种方案有很多的缺点,如:

1.         长时间未响应的请求给人不友好的体验

2.         需要针对每个按钮做请求前后的控制,会因为处理各种小问题而变得难以维护

3.         业务与控制逻辑混合在一起使得函数功能不单一

我最初的想法就是想找到一种类似于面向切面的无侵入页面的方式实现请求限制,因此想到了如下方案:

1.         只控制用户最后一次的请求

2.         第一次请求未响应之前一分钟之内不发相同的请求

3.         如果前一次请求得到了响应,那么第二次相同的请求也不做限制

后来发现这种方案行不通,主要有以下几个方面的原因:

1.         大多数页面每交互一次都会发起多个不同的请求。

2.         没个请求响应的时间也不一样,可能后发的请求先响应

我把这种想法告诉了导师,经过一番争论后认为我无法通过不侵入的方式实现这样的功能,按照他的想法,我得修改整个项目有请求的代码,完全低估了我对JS的了解,后来我独自优化了方案,不在只控制最后一个请求,代码实现的大纲如下:

发起POST请求前处理逻辑

1.         获取全局上下文中的存储请求信息的数组变量

2.         遍历请求响应数组

3.         清理大于两分钟未响应的请求,防止页面长时间不响应

4.         找到了与本次相同的请求

a)         如果请求小于200ms,则判断为系统行为,直接将环境和回调函数压入已有请求的调用栈,否则替换之前的请求的调用栈

b)        不发请求

5.         没有找到与本次相同的请求

a)         将请求信息、时间、调用环境和回调函数压进请求响应数组,请求URL和条件con作为唯一标识,调用栈也是一个由当前环境和回调函数组成的数组,使用数组解决相同的请求(url和con都一样)

b)        发起请求

请求响应后处理逻辑

1.         获取全局上下文中的存储请求信息的数组变量

2.         遍历请求响应数组

3.         找到了与此响应相同的请求

a)         遍历此请求的调用栈并依次调用回调函数

b)        删除已经处理的请求

4.         没有找到与此响应相同的请求则什么都不做

具体实现:

/*@description 自定义事件

 *@method_costomEvent

 *@formuphy

*/

muphypost: function (url, condition, callback, type, option) {

  if (typeof condition === 'function') {

       option = type;

       type = callback;

       callback = condition;

       condition = {};//jQuery:condition = undefine;

  }

  let that = this, reqUrl = (url + JSON.stringify(condition)).substr(0, 1000);

  //判断是否需要发起请求

  let hasReq = beforePost();

  if (hasReq === true) {

       return that;

  }

  //新增请求Token

  muphy.addToken(condition);

  //借助jQuery发请求

  $.post(url, condition, function (data, status){

       afterPost(data, status);

  }, type);

  return that;

  //请求前处理函数

  function beforePost() {

       //获取历史请求

       let postHistory = muphy.postHistory, now = new Date();

       //遍历请求响应数组,找到与此请求相同的请求

       for (let i = 0; i < postHistory.length;i++) {

           if (now - postHistory[i]._startTime > 120000) {

               //清理大于两分钟未响应的请求

               postHistory.splice(i, 1);

           } elseif (postHistory[i]._reqUrl === reqUrl){

               //找到了就更新请求时间,并将执行环境和回调函数放入请求响应数组的调用栈;

               //小于200ms判定为系统行为直接将环境和回调函数压入已有请求的调用栈,

//否则替换之前的请求

               if (now - postHistory[i]._startTime < 200) {

                   postHistory[i]._startTime =now;

                  postHistory[i]._handles.push({ _callback: callback, _this: that });

               } else {

                   postHistory[i]._handles =[{ _callback: callback, _this: that }];

               }

               //返回true 表示本次不发请求

               return true;

           }

       };

      //没找到与此相同的请求时将请求信息、时间、调用环境和回调函数压进请求响应数组

       postHistory.push({ _reqUrl: reqUrl,_startTime: new Date(), _handles: [{ _callback:callback, _this: that }] });

       //返回false 表示本次需要发请求

       return false;

  }

  //请求后处理函数

  function afterPost(data, status) {

       //获取请求响应数组

       let postHistory = muphy.postHistory;

       //遍历请求响应数组,找到与此请求相同的请求

       for (let i = 0; i < postHistory.length;i++) {

           if (postHistory[i]._reqUrl === reqUrl) {

               //找到相同的请求,遍历此请求的调用栈并调用

              muphy.each(postHistory[i]._handles, function () {

                   this._callback.call(this._this, data, status);

               });

               //调用完成删除已经处理的请求

               postHistory.splice(i, 1);

               break;

           }

       }

  }

}

JS前端无侵入实现防止重复提交请求技术的更多相关文章

  1. ajax防止重复提交请求1

    ajax防止重复提交请求 A. 独占型提交 只允许同时存在一次提交操作,并且直到本次提交完成才能进行下一次提交. module.submit = function() {   if (this.pro ...

  2. JS中如何防止表单重复提交问题

    在登录页面html中写如下代码 <script type="text/javascript"> var issubmit=false; function dosubmi ...

  3. 使用js是想防止表单重复提交的效果

    直接上代码: <html> <head> <title>Form表单</title> <script type="text/javasc ...

  4. js 前端向服务器端传送文件的常用请求方式

    在做项目的过程当中写到文件上传的功能,想着之前也是踩坑过来的,就在这里总结下自己常用的方法吧.我们现在一般都是通过ajax来搭起前后端数据交互的桥梁,但是大家在做到有文件需要上传的时候就会发现我们用a ...

  5. java web解决表单重复提交问题

    我们大家再进行web开发的时候,必不可少会遇见表单重复提交问题.今天就来给总结如何解决表单提交问题,欢迎大家交流指正. 首先我们在讨论如何解决表单重复提交问题之前先来解决三个问题:1.什么叫表单重复提 ...

  6. java web解决表单重复提交

    首先我们在讨论如何解决表单重复提交问题之前先来解决三个问题:1.什么叫表单重复提交?2.什么情况下会出现表单重复提交?3.什么情况需要避免表单重复提交? 什么叫表单提交问题,说白了,就是同一份信息,重 ...

  7. php解决表单重复提交

    php解决表单重复提交时间:2015-2-28 | 评论:1条评论 | 被查看了 189 次 | 标签:php, W3cui重复提交是我们开发中会常碰到的一个问题,除了我们使用js来防止表单的重复提交 ...

  8. PHP防止表单重复提交的解决方法

    PHP+SESSION防止表单重复提交 index.php 当前表单页面is_submit设为0 SESSION_START(); $_SESSION['is_submit'] = 0; <fo ...

  9. php 解决表单重复提交实现方法介绍

    重复提交是我们开发中会常碰到的一个问题,除了我们使用js来防止表单的重复提交,同时还可以使用php来防止重复提交哦. 例1  代码如下 复制代码 <?php/* * php中如何防止表单的重复提 ...

随机推荐

  1. oracle数据库导出表结构步骤

    导出完成后在状态栏中显示Find

  2. InnoSetup 以命令行自动编译打包

    本章介绍,在新建Innosetup的编译脚本iss文件后,在不运行Innosetup软件的基础上,以bat自动编译运行打包. 一.添加Innosetup软件包 下载InnoSetup软件包并解压到bu ...

  3. Web前端新学

    本人大学时学的是网络工程,那时候只是大概学了一点HTML和CSS.毕业后没有找IT方面的工作,所以对专业知识忘得差不多了.然由于生活现状,终是决心重新好好学习IT,刚入学的一周学习了C#语言的一些知识 ...

  4. Spring笔记

    Spring概念 Spring是一个开源的轻量级的框架 Spring核心主要两部分 (1) Aop面向切面编程,扩展功能不是修改源代码实现 (2) Ioc控制反转, 比如说有一个类,在类里面有方法(不 ...

  5. SAP 没有激活HUM功能照常可以使用Handling Unit

    SAP 没有激活HUM功能照常可以使用Handling Unit 笔者所在的项目上的公司间STO的流程里,发货公司在做PGI之后系统自动触发收货公司的inbound delivery单据,发货公司发出 ...

  6. matlab中的实时音频

    音频系统工具箱™针对实时音频处理进行了优化.audioDeviceReader, audioDeviceWriter, audioPlayerRecorder, dsp.AudioFileReader ...

  7. 测者的测试技术手册:测试应该关注java.util.List.subList的坑

    java中有一个返回子列表的方法: public list<E> subList(int fromIndex, int toIndex){       subListRangeCheck( ...

  8. 使用Log4Net进行错误日志记录

    http://blog.csdn.net/zdw_wym/article/details/48802821

  9. EntityFramework Code-First—领域类配置之DataAnnotations

    本文出自:https://www.cnblogs.com/tang-tang/p/5510574.html 一.摘要 EF Code-First提供了一个可以用在领域类或其属性上的DataAnnota ...

  10. Runnable和Callable之间的区别

    Runnable和Callable之间的区别 1.Runnable任务执行后没有返回值:Callable任务执行后可以获得返回值 2.Runnable的方法是run(),没有返回值:Callable的 ...