快速学习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基础知识学习笔记
Dec 02 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
Centos6.8下Node.js安装教程
May 12 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
自定义PC微信扫码登录样式写法
Dec 12 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 Javascript
js原生map实现的方法总结
Jan 19 Javascript
vue使用map代替Aarry数组循环遍历的方法
Apr 30 Javascript
Vue watch响应数据实现方法解析
Jul 10 Javascript
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
常见的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
php设计模式 Factory(工厂模式)
2011/06/26 PHP
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
PHP查询快递信息的方法
2015/03/07 PHP
php中file_exists函数使用详解
2015/05/08 PHP
php生成验证码函数
2015/10/20 PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
2016/05/17 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
2020/04/25 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
Djang中静态文件配置方法
2015/07/30 Python
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
Python OpenCV处理图像之滤镜和图像运算
2018/07/10 Python
python区分不同数据类型的方法
2019/10/14 Python
Python 字典中的所有方法及用法
2020/06/10 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
法人授权委托书范本
2014/04/04 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android