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请求进行拦 ...
随机推荐
- 6-MySQL DBA笔记-查询优化
第6章 查询优化 查询优化是研发人员比较关注也是疑问较多的领域.本章首先为读者介绍常用的优化策略.MySQL的优化器.连接机制,然后介绍各种语句的优化,在阅读本章之前,需要先对EXPLAIN命令,索引 ...
- 前端vue项目执行npm install 报错cd() never called()
前端我刚开始接触Vue,从GitHub上下载了代码程序,但缺少一些插件,用vscode打开并下载插件执行报错cd() never called! 解决的方式 1.执行cmd命令行不要再vscode里执 ...
- 5. Java的注释,标识符、标识符的命名规范
什么是标识符符? 凡是可以由自己命名的地方都称为修饰符. 例: 项目名 ,包名 ,类名 .方法名 2. 命名规范. ① 不可使用java关键字和保留字,但是可以包含关键字和保留字. ② ...
- java中long类型转换为int类型
由int类型转换为long类型是向上转换,可以直接进行隐式转换,但由long类型转换为int类型是向下转换,可能会出现数据溢出情况: 主要以下几种转换方法,供参考: 一.强制类型转换 [java] l ...
- Python中,标识符用法
Python中,标识符 在Python中,所有标识符都可以包括英文.数字和下划线(),但不能包括数字.python中的标识符区分大小写.这是知识的背景.但通常,Python成为以下划线开头的标识符的习 ...
- 微信小程序上传图片更新图像
解决思路: 1. 调用wx.chooseImage 选择图片 2.wx.uploadFile 上传图片 3.调用后台接口进行修改操作 修改原来的头像 wx.chooseImage({ success: ...
- 4.Servlet(动态web资源)
Servlet (动态web资源) 开发一个动态web资源(即开发一个Java程序向浏览器输出数据) 需完成以下两个步骤 1.编写一个Java类,实现servelet接口 2.把开发好的Java类部署 ...
- openresty获取nginx中的变量
在OpenResty中如何引用这些变量呢? 规则很简单, 如$remote_addr, 在OpenResty里面使用就是ngx.var.remote_adddr.
- 团队项目-Beta版本发布
这个作业属于哪个课程 课程链接 这个作业要求在哪里 作业要求链接 团队名称 众志陈成 这个作业的目标 通过团队协作了解软件开发的大致流程,并在这个过程中体会调整与优化程序的方法,为以后真实的软件开发奠 ...
- 算法---FaceNet在Tf下的实战篇
FaceNet---Tensorflow下的下的实战篇 @WP20190225 ===============目录=============== 一.FaceNet算法简介 二.FaceNet配置与使 ...