axios 请求前校验参数(js实现axios限制请求队列)
类别:编程学习 浏览量:2572
时间:2021-10-01 01:45:50 axios 请求前校验参数
js实现axios限制请求队列目录
- 背景是:
- 会造成什么情况呢?
在实际开发中,可能会遇到网络问题或者查询量比较大的情况,上一个请求还没有完成,用户就发起了下一个请求。
会造成什么情况呢?但是同一个请求多次发送到服务器,无疑是对服务器的一种压力,所以需要在已经优化服务器过查询速度后,以及用户网络情况比较差的条件下,在前端进行请求限制。
axios 自带的cancelToken可以帮我们实现这个需求,并且提供给了我们一个现成的api axios.CancelToken ,这是一个返回值是带有请求信息的回调函数,我们可以在需要cancel的时候去执行这个回调函数。具体实现如下:
const service = axios.create({}); const penddingMap = new Map(); const addPendding = (config) => { config.cancelToken = config.cancelToken || new axios.CancelToken(cancel => { if(!penddingMap.has(config.url)){ penddingMap.set(config.url,cancel); } }) } const removePendding = (config) => { if(penddingMap.has(config.url)){ let cancel = penddingMap.get(config.url); cancel(config.url); penddingMap.delete(config.url) } }
本地维护一个Map来存储每个请求信息, addPendding 中每次会去先判断是否有cancelToken,如果有就不用重新创建一个cancelToken。 removePendding 中判断请求信息是否在Map中,如果该请求存在于Map中,则执行cancel函数,并删除Map中的该请求。
拦截器中的具体应用:
service.interceptors.request.use(config => { removePending(config) // 如果存在Map中先cancel该请求 addPendding(config) // 添加该请求到Map中 return config }) service.interceptors.response.use(response => { ``` // some code return response.data },error => { // 捕获cancel请求并抛出 if(error instanceof Cancel){ error.message = '上一请求尚未结束,稍等~'; Message.error(error.message); return Promise.reject(error.response) // 这里抛出需要注意,在请求时调用try-catch进行捕获 }) )
这里拦截成功后,就可以限制住大流量的多次请求。
这里只是一个例子,也可以通过判断按钮逻辑来控制用户是否发起请求。
到此这篇关于js实现axios限制请求队列的文章就介绍到这了,更多相关js axios限制请求队列内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vuejs组件使用教程交流(Vue vee-validate插件的简单使用)
- pandasjson格式(对pandas处理json数据的方法详解)
- SQL Server中如何将数据导出为XML或Json文件
- js操作iframe
- js中parent和opener的区别
- videojs播放流媒体(video.js支持m3u8格式直播的实现示例)
- nodejs怎么查看对象的全部属性(浅谈nodejs中创建cluster)
- JS中错误处理
- php验证码图解(php/JS实现的生成随机密码验证码功能示例)
- js搜索功能的实现(前端JavaScript实现本地模糊搜索功能的方法实例)
- javascript中还原append代码(JS实现jQuery的append功能)
- js事件冒泡与事件捕获(基于事件冒泡、事件捕获和事件委托详解)
- js条件语句教学(浅谈JS如何写出漂亮的条件表达式)
- 火狐查看json数据
- JSON中的特殊字符
- vue引用js库报错(Vue插件报错:Vue.js is detected on this page.问题解决)
- 今天是什么日子(今天是什么日子有什么特殊意义吗)
- 这里输入关键词(怎么输入关键词搜索)
- 34岁的舒畅,就这样走到了末路,不知会不会后悔15年前的草率决定(就这样走到了末路)
- 不走心的古装造型 舒畅 毁容式 出演,萧蔷雷出新高度(不走心的古装造型)
- 嘉南传 第22集(嘉南传第22集)
- 哪版孙悟空最萌 黄渤躺萌了(哪版孙悟空最萌)
热门推荐
- 部署ssis包提示更改保护级别(SSIS 延迟验证方法)
- html5页面传值表(html5的pushstate以及监听浏览器返回事件的实现)
- js网站前端效果(JS如何让你的移动端交互体验更加优秀)
- python入门知识点总结(深入解析Python小白学习操作列表)
- nginx故障处理(详解Nginx启动失败的几种错误处理)
- 微信公众号扫码跳转网页(微信公众号实现扫码获取微信用户信息网页授权)
- 列举服务器网络防御措施(如何对Web服务器进行飓风级防御)
- docker 镜像id修改(Docker Alpine镜像时区问题完美解决方案)
- 用python制作一个简单的小程序(一个可以套路别人的python小程序实例代码)
- mvc中validateinput属性失效