快速学习AngularJs HTTP响应拦截器


Posted in Javascript onDecember 31, 2015

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

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 errorreturn $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);
}
}
};
]);

以上内容给大家分享快速学习AngularJs HTTP响应拦截器 的相关知识,希望大家喜欢,同时感谢大家一直以来对三水点靠木网站的支持。

Javascript 相关文章推荐
JavaScript DOM学习第四章 getElementByTagNames
Feb 19 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
NW.js 简介与使用方法
Feb 01 Javascript
浅谈AngularJS中$http服务的简单用法
May 15 Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
详解vue 数组和对象渲染问题
Sep 21 Javascript
如何通过vscode运行调试javascript代码
Jul 24 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 Javascript
常见的javascript跨域通信方法
Dec 31 #Javascript
javascript实现input file上传图片预览效果
Dec 31 #Javascript
分享几种比较简单实用的JavaScript tabel切换
Dec 31 #Javascript
jQuery+ajax实现文章点赞功能的方法
Dec 31 #Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 #Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 #Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 #Javascript
You might like
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
PHP初学者头疼问题总结
2006/10/09 PHP
php adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
解析php中curl_multi的应用
2013/07/17 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
重载toString实现JS HashMap分析
2011/03/13 Javascript
js调用后台servlet方法实例
2013/06/09 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
jquery UI Datepicker时间控件冲突问题解决
2016/12/16 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
Vue实例的对象参数options的几个常用选项详解
2019/11/08 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
python实现的一个p2p文件传输实例
2014/06/04 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
phpquery中文手册
2021/03/18 PHP
苹果中国官方网站:Apple中国
2016/07/22 全球购物
在什么时候需要使用"常引用"
2015/12/31 面试题
新闻系毕业生推荐信
2013/11/16 职场文书
高中生评语大全
2014/04/25 职场文书
房产公证委托书范本
2014/09/20 职场文书
群众路线专项整治方案
2014/10/27 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
能让Python提速超40倍的神器Cython详解
2021/06/24 Python
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang