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限制请求队列内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- ExtJs中getCmp、getDom、Get的区别
- js tab栏案例(JavaScript实现Tab栏切换特效)
- js验证身份证号
- h5制作支付功能(基于HTML5+tracking.js实现刷脸支付功能)
- nodejsweb服务(Nodejs实现内网穿透服务)
- 数组reduce方法的好处(JS使用reduce方法处理树形结构数据)
- python json转换字符串(python3 json数据格式的转换dumps/loads的使用、dict to str/str to dict、json字符串/字典)
- json和xml比较与区别
- 常用的几种jsp开发环境搭建(怎么一键安装Jsp网站程序?Jsp环境一键配置软件JspStudy推荐)
- vue 如何执行动态js(如何利用vue.js实现拖放功能)
- extjs中Toolbar工具栏
- js编写一个数组去重的方法(JS实现数组过滤从简单到多条件筛选)
- js里咋样设置css里面的属性(css不常见属性之pointer-events的使用方法)
- sqlserver常见函数(SQL Server之JSON 函数详解)
- JS实现金额大小写转换
- 常用JS验证函数
- 乔欣 古装剧中的高颜值(古装剧中的高颜值)
- 怎么才可以财富自由(如何让自己实现财富自由)
- 为什么越来越多年轻人回农村(为什么越来越多年轻人回农村生活)
- 怎么快速学好英语(怎么快速学好英语初中)
- 中国留学生都是富二代吗()
- 我们现在吃的苹果是哪里来的 原来现代苹果引入中国仅有一百多年(我们现在吃的苹果是哪里来的)
热门推荐
- angular组件化(详解Angular父子组件通讯)
- sql server 管理日志可以删除吗(SQL Server查看login所授予的具体权限问题)
- react初学难点(使用react的7个避坑案例小结)
- 宝塔面板导入数据库(宝塔面板迁移系统盘/www到数据盘/data)
- python中的迭代器详解(Python通过for循环理解迭代器和生成器实例详解)
- myisam和innodb的区别
- 少用iframe的原因
- sqlserver存储过程同步数据(SQL Server存储过程同时返回分页结果集和总数)
- php实用工具(php常用的工具开发整理)
- canvas3d效果(JavaScript canvas实现七彩太阳光晕效果)