快速学习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 相关文章推荐
在页面上点击任一链接时触发一个事件的代码
Apr 07 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
May 03 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
对JavaScript中this指针的新理解分享
Jan 31 Javascript
Angular.js实现注册系统的实例详解
Dec 18 Javascript
vue-cli配置文件——config篇
Jan 04 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
vue实现行列转换的一种方法
Aug 06 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
Nov 15 Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 Javascript
javascript实现数字时钟效果
Feb 06 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 && 逻辑与运算符使用说明
2010/03/04 PHP
Godaddy空间Zend Optimizer升级方法
2010/05/10 PHP
PHP学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
php连接mssql数据库的几种方法
2013/02/21 PHP
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
基于jquery实现ajax无刷新评论
2020/08/19 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
Python中使用HTMLParser解析html实例
2015/02/08 Python
Django中cookie的基本使用方法示例
2018/02/03 Python
python 实现在一张图中绘制一个小的子图方法
2019/07/07 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
python实现人脸签到系统
2020/04/13 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
python实现马丁策略的实例详解
2021/01/15 Python
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
最好的商品表达自己:Cafepress
2019/09/04 全球购物
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
表彰大会策划方案
2014/05/13 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
助学金感谢信
2015/01/20 职场文书
六一儿童节致辞
2015/07/31 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS