AngularJs 拦截器,拦截请求
问题前述
我在项目中遇到这样一个问题:
在Angular项目中,会有很多需要用户点击操作的地方,如果用户点击过快会产生多次相同请求,会吃服务器带宽,如果这是其他涉及钱有关的操作,这会产生一个致命的问题。对于这个问题,我想到了两种解决方案:
1. 比如 在点击一个按钮操作的时候,我们通过将这个按钮 disabled 属性设置为 true
,当请求结束后,再设置为 false ,
代码:
html:
<div class="btn" ng-click="login()" ng-disabled="is_click">登录</div>
Js:
$scope.login = function(){
//将按钮置为不可点击状态
is_click = true; //执行http请求操作
$http({
method : method,
params : params,
url : Config.BASE_URL + url
})
.then(function(){
//请求成功,将按钮置为可点击状态
is_click = false;
})
}
如果我有很多这样的操作,就需要写很多相同的代码。
AngularJs提供了一个拦截器,每次请求在http时,会先到拦截器中。所以,我们可以在拦截器中采取处理:
1.首先定义一个参数如:is_click, 在需要处理这个操作的地方通过附加这个参数,这样可以让我们去判断这个操作需不需要去检测
2.如果有,则进行检测,是否在一秒之内有相同请求(method、url、参数全相同视为相同请求)
3.如果没有,则添加到缓存中,如果有,则取消操作
具体见代码:
.factory('interceptor', ['$scope', function($scope){
var requestList = []; //缓存记录
function addRequestList(url){ //插入记录
var keepGoing = true;
angular.forEach(requestList, function (item) {
if(keepGoing && item.name == url){
item.time = new Date().getTime();
keepGoing = false;
}
}); if(keepGoing){
requestList.push({
name: url,
time: new Date().getTime()
});
}
}
function hitRequestList(url) { //检测是否有记录,并返回时间
var time = '';
var keepGoing = true;
angular.forEach(requestList, function (item) {
if(keepGoing && item.name == url){
time = item.time;
keepGoing = false;
}
});
return time;
}
//method,url,data 拼接成 string
function getRequestKey(data) {
var key = 'method:' + data.method + ',url:' + data.url + ',data:';
var str = ''; //特殊处理
... return key += str ? str : JSON.stringify(data.params || {});
}
var _interceptor = {
'request': function(req) {
if (req.params && req.params.is_click) {
var key = getRequestKey(req);
var lastTime = hitRequestList(key); //上次请求时间
var requesTime = new Date().getTime(); //当前请求时间
if (lastTime && ((requesTime - lastTime) < 1000)) {
console.log('----------', '取消这次请求');
req.method = 'GET';
req.cache = {
get: function () {
return null;
}
};
}
addRequestList(key);
}
return _interceptor
}])
最主要的取消请求的代码:
req.method = 'GET';
req.cache = {
get: function () {
return null;
}
}; 总结:
作为前端小学生,第一次写文章,不免有些错误的地方,希望大家可以提出来,感谢。
AngularJs 拦截器,拦截请求的更多相关文章
- Java过滤器处理Ajax请求,Java拦截器处理Ajax请求,拦截器Ajax请求
Java过滤器处理Ajax请求,Java拦截器处理Ajax请求,拦截器Ajax请求 >>>>>>>>>>>>>>&g ...
- spring mvc 通过拦截器记录请求数据和响应数据
spring mvc 能过拦截器记录请求数据记录有很多种方式,主要有以下三种: 1:过滤器 2:HandlerInterceptor拦截器 3:Aspect接口控制器 但是就我个人所知要记录返回的数据 ...
- Springboot通过拦截器拦截请求信息收集到日志
1.需求 最近在工作中遇到的一个需求,将请求中的客户端类型.操作系统类型.ip.port.请求方式.URI以及请求参数值收集到日志中,网上找资料说用拦截器拦截所有请求然后收集信息,于是就开始了操作: ...
- Struts2 拦截器—拦截action
对于拦截器的基本使用这里我就懒得打字了,我这里就讲下如何用 Struts2 拦截器 拦截action.这是我个人的想法,如果有什么不对的,或者你们有什么更好的方法.请多多留言! 拦截器的默认拦截的方法 ...
- 防止SpringMVC拦截器拦截js等静态资源文件
SpringMVC提供<mvc:resources>来设置静态资源,但是增加该设置如果采用通配符的方式增加拦截器的话仍然会被拦截器拦截,可采用如下方案进行解决: 方案一.拦截器中增加针对静 ...
- Springboot前后端分离中,后端拦截器拦截后,前端没有对应的返回码可以判断
项目登录流程如下 用户进入前端登录界面,输入账号密码等,输入完成之后前端发送请求到后端(拦截器不会拦截登录请求),后端验证账号密码等成功之后生成Token并存储到数据库,数据库中包含该Token过期时 ...
- Structs2 中拦截器获取请求参数
前言 环境:window 10,JDK 1.7,Tomcat 7 测试代码 package com.szxy.interceptor; import java.util.Map; import jav ...
- springboot springmvc拦截器 拦截POST、PUT、DELETE请求参数和响应数据,并记录操作日志
1.操作日志实体类 @Document(collection = "operation_log") @Getter @Setter @ToString public class O ...
- vue 路由拦截器和请求拦截器
路由拦截器 已路由为导向 router.beforeEach((to,from,next)=>{ if(to.path=='/login' || localStorage.getItem('to ...
- Apache httpclient拦截器对请求进行签名
Apahce httpclient 提供HttpRequestInterceptor和HttpResponseInterceptor两种拦截器分别处理请求和响应数据,下面讲一下如何对http请求进行拦 ...
随机推荐
- oracle基本查询01
/*数据库-----> 数据库实例----->表空间[逻辑单位]------>数据文件[物理单位] 通常情况下oracle数据库只会有一个实例ORCL 新建一个项目: MYSQL:创 ...
- hdu 1506 最大子矩阵面积
//写动态规划的题目 要把主要问题提炼出来 这里的问题就是求area=(j-k+1)*a[i] 如果找到j k是解决这个题目的关键 这里暴力求肯定是要超时的 这里用dp来优化 #include< ...
- Faster RCNN学习笔记
感谢知乎大神的分享 https://zhuanlan.zhihu.com/p/31426458 Ross B. Girshick在2016年提出了新的Faster RCNN,在结构上,Faster R ...
- ssh下known_hosts的作用
原文地址:http://blog.csdn.net/yasaken/article/details/7348441 在平时工作中,有时候需要SSH登陆到别的Linux主机上去,但有时候SSH登陆会被禁 ...
- JS闭包的简单理解。优缺点以及垃圾回收机制
闭包是什么? ·了解闭包首先了解js的‘链式作用域’结构,对象可以一级一级的向上查找父对象的变量,所以父对象的变量对子对象可见,反之不成立:所以都可以访问全局变量 ·为了解决函数外部无法访问函数内局部 ...
- 小程序 wxs时间戳转字符串
function formatDate(value) { //不能使用 new Date() var time = getDate(value); var year = time.getFullYea ...
- vue覆盖UI组件样式不生效
检查检查是不是加了scoped 在vue中,我们需要引用子组件,包括ui组件(element.iview). 但是在父组件中添加scoped之后,在父组件中书写子组件的样式是无效果的. 去掉scope ...
- TTP223 触摸按键
正面 反面 模式设置 可替代按键开关
- ORACLE数据库 自动备份 定时计划任务 windows
疑问为什么没有输入oracle 的数据库安装目录就能直接备份呢,可能是因为oracle默认安装c盘,在docs命令直接能操作吧,不信可以使用sqlplus试试. 一共分三步: 一.建立一个.bat 批 ...
- IDEA乱码总结和处理
工程乱码 打开File-Setting, 找到File Encodings这个选项,把encoding设置成你工程的编码即可,一般是UTF-8,如下图(红框的地方),然后重新rebuild一下,基本就 ...