前端如何防止多次接口请求
结论
- 如果你是为了解决在极短的时间内多个筛选条件同时变化导致的一次操作发送了多个一样的接口
- 那么你可以给你的请求方法加一个100ms的防抖去解决多次请求发送的问题
- 不要问为什么结论写在前面，因为我知道你没时间看
为什么会有多次请求
- 当你的数据获取需要筛选时，比如表格数据类的获取，为了方便用户，就会支持多个条件的筛选。比如常见的有时间筛选、类别筛选和其他一些业务相关的筛选，经常筛选条件会有3~5个。
- 正常情况下我们需要收集这些筛选条件，当其中任意一个条件变化，调接口获取数据局部刷新表格。
- 但复杂情况可能没有我们想象的这么简单，有多重情况会出现用户一次操作其中一个筛选条件发现变化，另一个筛选条件也发生了变化，这就会发送2次请求。或者有些筛选条件依赖本地存储或者依赖后端返回，导致筛选条件多次变化。
- 如果只是监听数据变化马上就发送请求接口返回数据，在复杂的场景下经常会出现发送多个请求的情况，我们想要的是一个操作只发送一次请求，这显然不太合理。
怎么解决
- 个人之前遇到这种问题都是十分头疼的，一般都要调试很久才能找到一个合适的方法保证一次操作只能发送一次请求。
- 有一天我在做表格搜索的时候，为了方便用户在搜索时输入的过程中就去获取表格数据，但是为了避免短时间内发送大量的接口。我给搜索加了500ms的防抖去防止用户正在输入时也发送请求。
- 突然我悟了，既然我可以通过给输入框加防抖解决短时发大量请求的问题。上述复杂情况，一次操作导致多个筛选条件导致发送了多个请求接口的问题的也可以通过加防抖的方式去解决。因为他们都有一个共同的特点，极短的时间内数据变化不需要也不应该马上去向后台获取数据。而是应该等数据稳定后再去发送请求
- 所以我同样监听这多个筛选条件，有变化我就会执行获取数据的方法，但是我给这个方法加了一个100ms的防抖，解决了多次请求发送的问题。
存在问题
- 此种方式比较取巧，延迟ms数可以自行调整，理论上应该50ms也能解决大多数多次请求发送的问题。
- 复杂问题可以通过这种方式巧妙回避，但是还是建议审查自己的代码查看如何避免多个参数同时变化。
前端如何防止多次接口请求相关推荐
- 前端请求接口post_前端如何优雅地模拟接口请求？(给你的代码加点小意外)
前言: 作为一名前端开发程序猿,每天都被产品经理催着开发,项目一启动,产品就过来了.嘘寒问暖:大胸弟,你啥时开始做啊?一般我们都会直接告诉TA,你先找接口解决数据问题. 而我们也会经常遇见" ...
- dubbo接口测试_Django测试工具平台之Dubbo接口请求 + 前端
前言 本章内容主要完成以下几个内容: 1.记录Dubbo接口请求 2.搜索请求记录 3.前端页面完成 4.项目第一阶段展示 项目展示中主要演示在本地如何启动项目,进行调试.如果需要部署线上环境,可以去 ...
- 搭建前端监控系统（四）接口请求异常监控篇
背景:市面上的监控系统有很多,大多收费,对于小型前端项目来说,必然是痛点.另一点主要原因是,功能虽然通用,却未必能够满足我们自己的需求, 所以我们自给自足也许是个不错的办法. 这是搭建前端监控系统的第 ...
- 前端必知必会HTTP请求系列（二）简单一点的HTTP协议
http协议用户客户端和服务器之间的通信 http协议和TCP/IP协议族内的其他众多协议相同,用于客户端和服务器之间的通信. 那么问题来个如果两台服务器之间一台服务器向另一台服务器进行接口请求那谁是 ...
- 技术实践丨如何解决异步接口请求快慢不均导致的数据错误问题？
本文分享自华为云社区<如何解决异步接口请求快慢不均导致的数据错误问题?>,原文作者:Kagol . 引言 搜索功能,我想很多业务都会涉及,这个功能的特点是: 用户可以在输入框中输入一个关键 ...
- Ajax通讯异常12002,前端MVC框架[02] 发送AJAX请求及建立连接池
前端MVC框架[02] 发送AJAX请求及建立连接池 默认分类 2012-10-11 07:51:28 < ol start='100' class='dp-xml'> / 异步请求管理器 ...
- 使用charles修改服务器返回数据,charles_01_打断点修改接口请求返回数据
前言 测试过程中,为了模拟某场景测试,经常需要修改接口请求或者返回数据.可通过抓包工具打断点,实现模拟测试场景.常用的抓包工具charles和fiddler均可打断点mock数据.由于小编安装了cha ...
- Nodejs教程09：实现一个带接口请求的简单服务器
示例代码请访问我的GitHub: github.com/chencl1986/- 带接口请求的简单服务器需求 虽然当前还未涉及到数据库的知识,但已经可以通过文件读写,实现一个简单的服务器,需求如下: ...
- 接口请求报错 504 Gateway Time-out
文章主要介绍的是页面504 Gateway Time-out 的解决思路 一.504 Gateway Time-out 原因? 因为浏览器访问接口请求,默认超时事件是1分钟,当遇到504接口超时,首先 ...
最新文章
- [译] React Native vs. Cordova、PhoneGap、Ionic，等等
- 用页传值方式解决模态窗口的Response.WriteFile文件下载
- 了解JavaScript核心精髓（三）
- PHP后台处理jQuery Ajax跨域请求问题 — xx was not called解决办法
- XML Schema是什么
- 记一次生产数据库系统内存使用过高的案例
- Linux内核实验作业七
- prim算法适用条件_内部排序算法的比较及应用
- Linux下如何查看定位当前正在运行的Nginx的配置文件
- Oracle表空间设计理念
- python计算log函数
- [状压DP]帮助Bubu
- linux指定行添加内容,Linux sed命令在指定行前后添加内容
- MTK USB OTG功能如何打开及实现
- 在VMware上如何创建虚拟机以及安装linux系统
- 行测-判断推理-类比推理-语法关系
- 生活质量衡量系统_「电力闲聊」电能质量中的电压质量，有四个衡量指标
- 【程序员思维修炼】读书笔记
- 如何验证服务器有没ftp服务,如何检查ftp服务器是否联机并获取它未生成的错误？...
- mac序列号生成主板号_如何查找Mac的序列号（即使您没有Mac也是如此）