vue如何阻止重复请求
导读：本文共10439.5字符，通常情况下阅读需要35分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 项目当中前端代码会遇到同一个请求向服务器发了多次的情况,我们要避免服务器资源浪费,同一个请求一定时间只允许发一次请求思路(1)如果业务简单,例如同一个按钮防止多次点击,我们可以用定时器做防抖处理(2)如果业务复杂,例如多个组件通过代码,同一个请求发多... ...
目录
(为您整理了一些要点),点击可以直达。
项目当中前端代码会遇到同一个请求向服务器发了多次的情况,我们要避免服务器资源浪费,同一个请求一定时间只允许发一次请求
(1)如果业务简单,例如同一个按钮防止多次点击,我们可以用定时器做防抖处理
(2)如果业务复杂,例如多个组件通过代码,同一个请求发多次,这个时候防抖已经不好处理了,最好是对重复的ajax请求统一做取消操作
方式1-通过定时器做防抖处理
效果:当用户连续点击多次同一个按钮,最后一次点击之后,过小段时间后才发起一次请求
原理:每次调用方法后都产生一个定时器,定时器结束以后再发请求,如果重复调用方法,就取消当前的定时器,创建新的定时器,等结束后再发请求,工作当中可以用第三方封装的工具函数例如lodash的debounce方法来简化防抖的代码
连接
无法解决多个按钮件的重复请求的发送问题,例如下面两种情况
按钮事件间是相互独立的,调用的是不同方法,做不到按钮间防抖效果
预览
按钮间调用的方法是相同的,是可以对方法做防抖处理,但是处理本身对方法做了一次封装,会影响到之前方法的返回值接收,需要对之前的方法做更多处理,变得更加复杂,不推荐
预览
方式2-通过取消ajax请求
直接对请求方法做处理,通过ajax库的api方法把重复的请求给取消掉
通过调用XMLHttpRequest对象实例的abort方法把请求给取消掉
预览
通过axios的CancelToken对象实例cancel方法把请求给取消掉
预览
通过axios请求拦截器,在每次请求前把请求信息和请求的取消方法放到一个map对象当中,并且判断map对象当中是否已经存在该请求信息的请求,如果存在取消上传请求
预览
通过axios的响应拦截器,在请求成功后在map对象当中,删除该请求信息的数据
预览
通过axios的响应拦截器,在请求失败后在map对象当中,删除该请求信息的数据
vue如何阻止重复请求的详细内容，希望对您有所帮助，信息来源于网络。