快速了解AngularJs HTTP响应拦截器

任何时候,如果我们想要为请求添加全局功能,例如身份认证、错误处理等,在请求发送给服务器之前或服务器返回时对其进行拦截,是比较好的实现手段。

 angularJs通过拦截器提供了一个从全局层面进行处理的途径。

四种拦截器

实现 request 方法拦截请求

request: function(config) {
// do something on request success
return config || $q.when(config);
}

该方法会在 $http 发送请求后台之前执行,因此你可以修改配置或做其他的操作。该方法接收请求配置对象(request configuration object)作为参数,然后必须返回配置对象或者 promise 。如果返回无效的配置对象或者 promise 则会被拒绝,导致 $http 调用失败。

实现 requestError 方法拦截请求异常

requestError: function(rejection) {
// do something on request error
  return $q.reject(rejection); }

有时候一个请求发送失败或者被拦截器拒绝了,请求异常拦截器会俘获那些被上一个请求拦截器中断的请求。它可以用来恢复请求或者有时可以用来撤销请求之前所做的配置,比如说关闭进度条,激活按钮和输入框什么之类的。

实现 response 方法拦截响应

response: function(response) {
// do something on response success
return response || $q.when(response);
}

该方法会在 $http 接收到从后台过来的响应之后执行,因此你可以修改响应或做其他操作。该方法接收响应对象(response object)作为参数,然后必须返回响应对象或者 promise。响应对象包括了请求配置(request configuration),头(headers),状态(status)和从后台过来的数据(data)。如果返回无效的响应对象或者 promise 会被拒绝,导致$http 调用失败。

实现 responseError 方法拦截响应异常

responseError: function(rejection) {
// do something on response error
  return $q.reject(rejection); }

有时候我们后台调用失败了,也有可能它被一个请求拦截器拒绝了或者被上一个响应拦截器中断了。在这种情况下,响应异常拦截器可以帮助我们恢复后台调用。

拦截器核心

拦截服务工厂

var app = angular.module("ajaxHttp", []);
app.factory("httpInterceptor", [ "$q", "$rootScope", function($q, $rootScope) {
return {
request: function(config) {
// do something on request success
return config || $q.when(config);
},
requestError: function(rejection) {
// do something on request error
return $q.reject(rejection)
},
response: function(response) {
// do something on response success
return response || $q.when(response);
},
responseError : function(rejection) {
// do something on response error
return $q.reject(rejection);
}
};
}]);

注册拦截工厂方法

app.config(["$httpProvider", function($httpProvider) {
$httpProvider.interceptors.push("httpInterceptor");
}]);

示例

对401,404的拦截处理

    app.config(["$httpProvider", function($httpProvider) { 
$httpProvider.interceptors.push('httpInterceptor'); 
}]); 
app.factory("httpInterceptor", ["$q", "$injector", function($q, $injector) {
return {
"responseError": function(response) {
if (response.status == 401) {
var rootScope = $injector.get('$rootScope');
var state = $injector.get('$rootScope').$state.current.name;
rootScope.stateBeforLogin = state;
rootScope.$state.go("login");
return $q.reject(response);
}
else if (response.status === 404) {
console.log("404!");
return $q.reject(response);
}
}
};
]);

 参考

1、http://www.jb51.net/article/77099.htm

2、http://docs.ngnice.com/api/ng/service/$http


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362715.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

U盘专杀工具,U盘防御软件,U盘病毒防火墙--UDiskSyS

近来闲聊无事,写了一款专门针对U盘的防御软件,U盘插入后自动扫描并清除病毒并还原被感染的文件。是常见的文件夹伪装病毒,死亡应答病毒,exe感染型病毒的克星。UDiskSyS不像那些所谓的正规杀毒软件遇到搞不定的病毒统统删除之&…

CenterNet算法笔记(目标检测论文)

论文名称:CenterNet: Keypoint Triplets for Object Detectiontection 论文链接:https://arxiv.org/abs/1904.08189 代码链接:https://github.com/Duankaiwen/CenterNet 简介 该论文是由中科院,牛津大学以及华为诺亚方舟实验室联合…

git提交代码时报错:nothing added to commit but untracked files present

原因: git没有把提交的文件加载进来,报红色的是需要提交的文件, 解决步骤: 用git add XXX(文件名) 把提示报红色的文件加上git commit -m “xx”git push -u origin master重新提交就可以了

VSS使用手册

1 VSS概述 版本控制是工作组软件开发中的重要方面,它能防止意外的文件丢失、允许反追踪到早期版本、并能对版本进行分支、合并和管理。在软件开发和您需要比较两种版本的文件或找回早期版本的文件时,源代码的控制是非常有用的。Visual SourceSafe 是一种…

语句和函数

1.for-in语句:是一种精准的迭代语句,可以用来枚举对象的属性。 2.label语句:在代码中添加标签,以便将来使用,由break和continue语句调用。3.with语句:将代码的作用域设置到一个特定的对象中。一般不建议过多…

服务器与客户端渲染(AngularJS与服务器端MVC)

关于服务器与客户端应用程序渲染的讨论很多。 虽然没有“一刀切”的解决方案,但我将尝试从不同的角度主张客户端(特别是AngularJS)。 首先是建筑。 建筑 做得好的架构已经明确定义了关注点分离(SoS) 。 在大多数情况下…

MySQL 数据类型简介 创建数据表及其字段约束

数据类型介绍 MySQL 数据类型分类 整型浮点型字符类型(char与varchar)日期类型枚举与集合具体数据类型见这篇博客 MySQL表操作中的约束 primary key 主键约束 非空唯一unique key 唯一约束not null 非空约束foreign key 外键约束创建表的的语法 CREATE TABLE[IF NOT EXISTS] tb…

elementUI的container布局设置全屏宽度

进用element UI的 container 布局,发现不能全屏铺满 添加了一行代码: .el-container{height:100%;padding:0;margin:0;width:100%;}发现高度占满全屏,但是宽度还没有 继续给 html,body加了 width:100%;还是没有任何…

【转】首次敏捷项目开发实践

首次采用敏捷方式进行开发,我想把我们的做法与大家分享下,同时希望大家指出我们的不足和需要改进的地方,让我们的项目进行的更顺利,目前项目已过三分之一,客户比较满意,还算顺利。项目简介:一个…

CSS border-radius边框圆角

在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置。 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 1. 介绍 1.1 圆角属性 CSS3提供了5种圆角属性 border-radius :同时设置4个边框的…

element实现动态路由+面包屑

要掌握:localStorage,组件封装 ​​​​ emm,第一次上传视频转gif的图片,效果不咋好。。。 视频转gif 的软件连接 http://www.zxt2007.com/downloads.html 找到一个可以截取部分视频制作gif图的软件https://soft.onlinedo.cn/gif…

Matlab——矩阵运算 矩阵基本变换操作

矩阵运算 加 - 减 .* 乘 ./ 左除 .\ 右除 .^ 次方 . 转置 除了加减符号,其余的运算符必须加“.” >> a 1:5a 1 2 3 4 5>> a-2 %减法ans -1 0 1 2 3 >> 2.*a-1 %乘法 减法ans 1 3 5 7 9 >&g…

Oracle最新的Java 8更新破坏了您的工具-它是如何发生的?

如果您最近一直在关注Java世界的消息,那么您可能听说过Oracle发布的最新Java 8构建,Java 8u11(和Java 7u65)引入了错误并破坏了一些流行的第三方工具,例如ZeroTurnaround的JRebel,Javassist,Goo…

为什么选择Dojo - 记Dojo中文博客正式开张

公告栏里写到:Dojo的高门槛一旦跨过,必将别无所求。含义有二:第一,Dojo难学;第二,Dojo很强大。 这也揭示了本博客的目标:帮助大家用好Dojo这个优秀的Ajax框架。 在回答为什么选择Dojo之前&#…

ExtJS 4.2 第一个程序

本篇介绍如何创建一个ExtJS应用程序。并通过创建目录、导入文件、编写代码及分析代码等步骤来解释第一个ExtJS程序。 目录 1. 创建程序 1.1 创建目录建议 1.2 实际目录 1.3 index.html 1.4 运行图 2. 代码分析 2.1 Ext.onReady() 2.2 Ext.create() 1. 创建程序 1.1 创建目录…

ZooKeeper,策展人以及微服务负载平衡的工作方式

Zookeeper如何确保每位工人都能愉快地从工作委托经理那里得到一些工作。 Apache ZooKeeper是注册,管理和发现在不同计算机上运行的服务的工具。 当我们必须处理具有许多节点的分布式系统时,它是技术堆栈中必不可少的成员,这些节点需要知道其…

elementUI清空弹框中的表单数据

点击此处直达应用场景示例 官网&#xff1a;https://element.eleme.cn/#/zh-CN/component/form 补充&#xff1a;改变表头颜色&#xff1a; <el-table :data"tableData" border style"width: 100%" :header-cell-style"{background:#d3dce6,col…

(一)PHP基础知识考察点

1&#xff0c;PHP引用变量的考察点&#xff1a; 概念&#xff1a;引用就是用不同的名字访问同一个变量内容。 定义方式&#xff1a; 使用&符号。 PHP引用变量的工作原理 这里有个COW copy on write 用zval&#xff08;&#xff09;去查看空间占用情况以及引用情况。 unse…

.Net4.0 Parallel编程(三)Data Parallelism下

在上篇文章中介绍了如何Break、Stop循环&#xff0c;以及如何定义线程局部变量。在本文中介绍如何在外部去取消循环、以及异常的处理。 Cancel 在并行的循环中支持通过传递ParallelOptions参数中的CancellationToken进行取消循环的控制&#xff0c;我们可以CancellationTokenSo…

节点的运用和方法

JQUERY的父&#xff0c;子&#xff0c;兄弟节点查找方法 jQuery.parent(expr) 找父亲节点&#xff0c;可以传入expr进行过滤&#xff0c;比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(ex…