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限制请求队列内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- js页面跳转的几种代码
- vue.js入门教学第15讲(Vue.js 使用AntV X6的示例步骤)
- ExtJs常用代码片段
- js的三种使用方法(JS带你深入领略Proxy的世界)
- JS动态操作select的option
- javaweb购物车案例(js实现模拟购物商城案例)
- python class转json(Python对象转换为json的方法步骤)
- js实现div(javascript拖曳互换div的位置实现示例)
- 原生js实现轮播图代码(js实现轮播图制作方法)
- php入门教程源代码修改教程(php+js实现的无刷新下载文件功能示例)
- nodejs子进程调试(Node.js实现断点续传)
- js弹出新窗口被拦截的解决方法
- extjs多选下拉框
- js 出现cannot find function(Fatal error: Call to a member function read on a non-object in 错误解决方法)
- js中什么是宏任务(浅谈JavaScript宏任务和微任务执行顺序)
- 详解JS中你不知道的各种循环测速(详解JS中你不知道的各种循环测速)
- 观花盆栽佛肚竹盆景制作及养护(观花盆栽佛肚竹盆景制作及养护)
- 春天养佛肚竹,做好这几件事,叶绿根壮寓意好 越养越旺家(春天养佛肚竹做好这几件事)
- 律界衣品最好,时尚圈学识数高,41岁的Amal堪称现实版的傲骨贤妻(时尚圈学识数高)
- 刘智泰确认出演《Good Wife》 担纲男一号(刘智泰确认出演Good)
- 《傲骨之战》剧终 律政女魔头Diane,为什么是大女主天花板(傲骨之战剧终律政女魔头Diane)
- 汉族(汉族的祖先是谁)
热门推荐
- 百度免费翻译接口(基于python实现百度翻译功能)
- zabbix如何监控访问状态码(基于zabbix实现监控Jenkins过程详解)
- sql语句无效数字(SQL中写入包含有英文单引号“ '' ”失败问题深入详解)
- web项目部署到阿里云服务器上(阿里云的WindowsServer2016上部署php+apache)
- ftp服务器安装和配置教学设计思路(FTP服务器的主要参数配置讲解)
- linq中延迟执行
- pythonfor循环如何遍历嵌套列表(在Python中,不用while和for循环遍历列表的实例)
- python中列表操作五种常用方法(Python使用paramiko操作linux的方法讲解)
- laravel5.5以下自定义日志(Laravel timestamps 设置为unix时间戳的方法)
- python栈和队列(Python 实现数据结构中的栈队列)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9