快速学习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 相关文章推荐
翻译整理的jQuery使用查询手册
Mar 07 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
Aug 30 Javascript
Jquery响应回车键直接提交表单操作代码
Jul 25 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
Nov 02 Javascript
使用javascript实现判断当前浏览器
Apr 14 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 Javascript
手动初始化Angular的模块与控制器
Dec 26 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
详解Vue组件实现tips的总结
Nov 01 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
vue element项目引入icon图标的方法
Jun 06 Javascript
JS数据类型STRING使用实例解析
Dec 18 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
深入解析php中的foreach函数
2013/08/31 PHP
基于PHP的简单采集数据入库程序
2014/07/30 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
9个比较实用的php代码片段
2016/03/15 PHP
php实现微信发红包功能
2018/07/13 PHP
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
js用Date对象的setDate()函数对日期进行加减操作
2014/09/18 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
vant 中van-list的用法说明
2020/11/11 Javascript
基于Python的身份证号码自动生成程序
2014/08/15 Python
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
详解Python验证码识别
2016/01/25 Python
快速入手Python字符编码
2016/08/03 Python
Django教程笔记之中间件middleware详解
2018/08/01 Python
解决Django中多条件查询的问题
2019/07/18 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
python3字符串输出常见面试题总结
2020/12/01 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
2014年出纳工作总结与计划
2014/12/09 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
浙江省杭州市平均工资标准是多少?
2019/07/09 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript
mysql中数据库覆盖导入的几种方式总结
2022/03/25 MySQL
Python实现聚类K-means算法详解
2022/07/15 Python