快速学习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 相关文章推荐
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
Apr 19 Javascript
Javascript简单实现可拖动的div
Oct 22 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
jquery中get,post和ajax方法的使用小结
Feb 04 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
Angular4 中内置指令的基本用法
Jul 31 Javascript
JavaScript函数中的this四种绑定形式
Aug 15 Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 Javascript
vue实现的组件兄弟间通信功能示例
Dec 04 Javascript
原生JavaScript实现拖动校验功能
Sep 29 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 class类的用法详细总结
2013/10/17 PHP
php导入导出excel实例
2013/10/25 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
Vue.extend构造器的详解
2017/07/17 Javascript
原生js实现Flappy Bird小游戏
2018/12/24 Javascript
vue2配置scss的方法步骤
2019/06/06 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
python常用函数详解
2016/09/13 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
Python PIL图片添加字体的例子
2019/08/22 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
Python定义一个Actor任务
2020/07/29 Python
HTML5 Canvas概述
2009/08/26 HTML / CSS
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
《再别康桥》教学反思
2014/02/12 职场文书
《春天来了》教学反思
2014/04/07 职场文书
博士生导师推荐信
2014/07/08 职场文书
社区志愿者活动方案
2014/08/18 职场文书
小学班级特色活动方案
2014/08/31 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
观看建国大业观后感
2015/06/01 职场文书
早上好问候语大全
2015/11/10 职场文书
高中历史教学反思
2016/02/19 职场文书