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请求进行拦 ...
随机推荐
- docker部署redis
镜像获取 docker pull redis:4.0 ##当前最新版本 docker images 启动 docker run --name redis-huiyuan -p : -v $PWD/da ...
- HTTP的请求方法
. OPTIONS - 获取服务器支持的HTTP请求方法: 用来检查服务器的性能.如:AJAX进行跨域请求时的预检,需要向另外一个域名的资源发送一个HTTP O ...
- .NET Core 创建Windows服务
.NET Core 创建Windows服务 作者:高堂 原文地址:https://www.cnblogs.com/gaotang/p/10850564.html 写在前面 使用 TopShelf+Au ...
- python selenium5 模拟点击+拖动+按照指定相对坐标拖动 58同城验证码
#!/usr/bin/python # -*- coding: UTF-8 -*- # @Time : 2019年12月9日11:41:08 # @Author : shenghao/10347899 ...
- [NOIP10.4模拟赛]3.z题解--思维
题目链接: 咕咕 闲扯: 哈哈这道T3考场上又敲了5个namespace,300+行,有了前车之鉴还对拍过,本以为子任务分稳了 结果只有30分哈哈,明明用极限数据对拍过不知怎么回事最后数据又是读不全, ...
- Java学习路径(抛光砖)
这就是我刚刚在五孔问答中找到的Java学习路线图抛光砖价格.我个人认为,这条Java学习路线是可以的.它是2018年相对较新的Java学习路线,更符合企业就业标准. Java学习路径的第一阶段:Jav ...
- 利用django 实现个人博客 全记录(二)
上一篇文章已经把基础环境搭建好了 一 创建app D:\学习\python3.7.3\python manage.py startapp blog 修改 博客的 models.py ) ) def ...
- 【python】python _、__、__xx__之间的差别
本文来自 yzl11 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/yzl11/article/details/53792416?utm_source=copy 单下 ...
- Python学习记录7-继承
面向对象的三大特性 封装 继承 多态 封装 封装就是对对象的成员进行访问限制 封装的三个级别: 公开,public 受保护的,protected 私有的,private public,private, ...
- svn中日志不展示解决方法记录
一,问题:点击svn查看日志时不显示.筛选时间显示为1970 1,猜想可能没有查看日志权限 2,查看linux 下svn版本库 confg 下三个配制文件 authz ,passwd ,svnserv ...