$httpAngularJS 的 $http 服务允许我们通过发送 HTTP 请求方式与后台进行通信。在某些情况下,我们希望可以俘获所有的请求,并且在将其发送到服务端之前进行操作。还有一些情况是,我们希望俘获响应,并且在完成完成调用之前处理它。一个很好例子就是处理全局 http 异常。拦截器(Interceptors)应运而生。本文将介绍 AngularJS 的拦截器,并且给几个有用的例子。

什么是拦截器?

$httpProvider 中有一个 interceptors 数组,而所谓拦截器只是一个简单的注册到了该数组中的常规服务工厂。下面的例子告诉你怎么创建一个拦截器:

<!-- lang: js -->
module.factory('myInterceptor', ['$log', function($log) {
$log.debug('$log is here to show you that this is a regular factory with injection'); var myInterceptor = {
....
....
....
}; return myInterceptor;
}]);

然后通过它的名字添加到 $httpProvider.interceptors 数组:

<!-- lang: js -->
module.config(['$httpProvider', function($httpProvider) {
$httpProvider.interceptors.push('myInterceptor');
}]);

拦截器允许你:

  • 通过实现 request 方法拦截请求: 该方法会在 $http 发送请求道后台之前执行,因此你可以修改配置或做其他的操作。该方法接收请求配置对象(request configuration object)作为参数,然后必须返回配置对象或者 promise 。如果返回无效的配置对象或者 promise 则会被拒绝,导致 $http 调用失败。

  • 通过实现 response 方法拦截响应: 该方法会在 $http 接收到从后台过来的响应之后执行,因此你可以修改响应或做其他操作。该方法接收响应对象(response object)作为参数,然后必须返回响应对象或者 promise。响应对象包括了请求配置(request configuration),头(headers),状态(status)和从后台过来的数据(data)。如果返回无效的响应对象或者 promise 会被拒绝,导致 $http 调用失败。

  • 通过实现 requestError 方法拦截请求异常: 有时候一个请求发送失败或者被拦截器拒绝了。请求异常拦截器会俘获那些被上一个请求拦截器中断的请求。它可以用来恢复请求或者有时可以用来撤销请求之前所做的配置,比如说关闭进度条,激活按钮和输入框什么之类的。

  • 通过实现 responseError 方法拦截响应异常: 有时候我们后台调用失败了。也有可能它被一个请求拦截器拒绝了,或者被上一个响应拦截器中断了。在这种情况下,响应异常拦截器可以帮助我们恢复后台调用。异步操作

异步操作

有时候需要在拦截器中做一些异步操作。幸运的是, AngularJS 允许我们返回一个 promise 延后处理。它将会在请求拦截器中延迟发送请求或者在响应拦截器中推迟响应。

<!-- lang: js -->
module.factory('myInterceptor', ['$q', 'someAsyncService', function($q, someAsyncService) {
var requestInterceptor = {
request: function(config) {
var deferred = $q.defer();
someAsyncService.doAsyncOperation().then(function() {
// Asynchronous operation succeeded, modify config accordingly
...
deferred.resolve(config);
}, function() {
// Asynchronous operation failed, modify config accordingly
...
deferred.resolve(config);
});
return deferred.promise;
}
}; return requestInterceptor;
}]);

这个例子中,请求拦截器使用了一个异步操作,根据结果来更新配置。然后它用更新后的配置继续执行操作。如果 deferred 被拒绝,http 请求则会失败。

响应拦截器的例子一样:

<!-- lang: js -->
module.factory('myInterceptor', ['$q', 'someAsyncService', function($q, someAsyncService) {
var responseInterceptor = {
response: function(response) {
var deferred = $q.defer();
someAsyncService.doAsyncOperation().then(function() {
// Asynchronous operation succeeded, modify response accordingly
...
deferred.resolve(response);
}, function() {
// Asynchronous operation failed, modify response accordingly
...
deferred.resolve(response);
});
return deferred.promise;
}
}; return responseInterceptor;
}]);

只有当 deferred 被解析,请求才算成功,如果 deferred 被拒绝,请求将会失败。

例子

本节中我将提供一些 AngularJS 拦截器的例子,以便让你更好的理解它们是如何使用的,并且可以展示一下它们能怎样帮助你。不过请记住,我这里提供的解决案不一定是最好或者最准确的解决案。

Session 注入(请求拦截器)

这里有两种方式来实现服务端的认证。第一种是传统的 Cookie-Based 验证。通过服务端的 cookies 来对每个请求的用户进行认证。另一种方式是 Token-Based 验证。当用户登录时,他会从后台拿到一个 sessionTokensessionToken 在服务端标识了每个用户,并且会包含在发送到服务端的每个请求中。

下面的 sessionInjector 为每个被俘获的请求添加了 x-session-token 头 (如果当前用户已登录):

<!-- lang: js -->
module.factory('sessionInjector', ['SessionService', function(SessionService) {
var sessionInjector = {
request: function(config) {
if (!SessionService.isAnonymus) {
config.headers['x-session-token'] = SessionService.token;
}
return config;
}
};
return sessionInjector;
}]);
module.config(['$httpProvider', function($httpProvider) {
$httpProvider.interceptors.push('sessionInjector');
}]);

然后创建一个请求:

<!-- lang: js -->
$http.get('https://api.github.com/users/naorye/repos');

被 sessionInjector 拦截之前的配置对象是这样的:

<!-- lang: js -->
{
"transformRequest": [
null
],
"transformResponse": [
null
],
"method": "GET",
"url": "https://api.github.com/users/naorye/repos",
"headers": {
"Accept": "application/json, text/plain, */*"
}
}

被 sessionInjector 拦截之后的配置对象是这样的:

<!-- lang: js -->
{
"transformRequest": [
null
],
"transformResponse": [
null
],
"method": "GET",
"url": "https://api.github.com/users/naorye/repos",
"headers": {
"Accept": "application/json, text/plain, */*",
"x-session-token": 415954427904
}
}

时间戳(请求和响应拦截器)

让我们用拦截器来测一下从后台返回响应需要多少时间。可以通过给每个请求和响应加上时间戳。

<!-- lang: js -->
module.factory('timestampMarker', [function() {
var timestampMarker = {
request: function(config) {
config.requestTimestamp = new Date().getTime();
return config;
},
response: function(response) {
response.config.responseTimestamp = new Date().getTime();
return response;
}
};
return timestampMarker;
}]);
module.config(['$httpProvider', function($httpProvider) {
$httpProvider.interceptors.push('timestampMarker');
}]);

然后我们可以这样:

<!-- lang: js -->
$http.get('https://api.github.com/users/naorye/repos').then(function(response) {
var time = response.config.responseTimestamp - response.config.requestTimestamp;
console.log('The request took ' + (time / 1000) + ' seconds.');
});
完整例子:
<!doctype html>
<html>
<head>
<title>Timestamp Marker Example</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script>
</head> <body ng-app="timestamp-marker-example">
<div ng-controller="ExampleController">
The request took <span ng-bind="requestTime"></span> seconds.
</div> <script type="text/javascript">
var module = angular.module('timestamp-marker-example', []);
module.factory('timestampMarker', [function() {
var timestampMarker = {
request: function(config) {
config.requestTimestamp = new Date().getTime();
return config;
},
response: function(response) {
response.config.responseTimestamp = new Date().getTime();
return response;
}
};
return timestampMarker;
}]);
module.config(['$httpProvider', function($httpProvider) {
$httpProvider.interceptors.push('timestampMarker');
}]); module.controller('ExampleController', ['$scope', '$http', function($scope, $http) {
$scope.requestTime = '[waiting]';
$http.get('https://api.github.com/users/naorye/repos').then(function(response) {
var time = response.config.responseTimestamp - response.config.requestTimestamp;
$scope.requestTime = (time / 1000);
});
}]);
</script>
</body>
</html>

请求恢复 (请求异常拦截)

为了演示请求异常拦截,我们需要模拟前一个拦截器拒绝了请求这种情况。我们的请求异常拦截器会拿到被拒绝的原因以及恢复请求。

让我们来创建两个拦截器: requestRejector 和 requestRecoverer

<!-- lang: js -->
module.factory('requestRejector', ['$q', function($q) {
var requestRejector = {
request: function(config) {
return $q.reject('requestRejector');
}
};
return requestRejector;
}]);
module.factory('requestRecoverer', ['$q', function($q) {
var requestRecoverer = {
requestError: function(rejectReason) {
if (rejectReason === 'requestRejector') {
// Recover the request
return {
transformRequest: [],
transformResponse: [],
method: 'GET',
url: 'https://api.github.com/users/naorye/repos',
headers: {
Accept: 'application/json, text/plain, */*'
}
};
} else {
return $q.reject(rejectReason);
}
}
};
return requestRecoverer;
}]);
module.config(['$httpProvider', function($httpProvider) {
$httpProvider.interceptors.push('requestRejector');
// Removing 'requestRecoverer' will result to failed request
$httpProvider.interceptors.push('requestRecoverer');
}]);

然后,如果你像下面这样请求,我们会在 log 中看到 success,虽然 requestRejector 拒绝了请求。

<!-- lang: js -->
$http.get('https://api.github.com/users/naorye/repos').then(function() {
console.log('success');
}, function(rejectReason) {
console.log('failure');
});

完整代码:

<!doctype html>
<html>
<head>
<title>Request Recover Example</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script>
</head> <body ng-app="request-recover-example">
<div ng-controller="ExampleController" class="result">
Request <span ng-bind="requestStatus"></span>.
<span ng-if="isRecovered">(Request was recovered)</span>
</div> <script type="text/javascript">
var module = angular.module('request-recover-example', []);
module.factory('requestRejector', ['$q', function($q) {
var requestRejector = {
request: function(config) {
return $q.reject('requestRejector');
}
};
return requestRejector;
}]);
module.factory('requestRecoverer', ['$q', '$rootScope', function($q, $rootScope) {
var requestRecoverer = {
requestError: function(rejectReason) {
if (rejectReason === 'requestRejector') {
$rootScope.isRecovered = true;
// Recover the request
return {
transformRequest: [],
transformResponse: [],
method: 'GET',
url: 'https://api.github.com/users/naorye/repos',
headers: {
Accept: 'application/json, text/plain, */*'
}
};
} else {
return $q.reject(rejectReason);
}
}
};
return requestRecoverer;
}]);
module.config(['$httpProvider', function($httpProvider) {
$httpProvider.interceptors.push('requestRejector');
// Removing 'requestRecoverer' will result to failed requesr
$httpProvider.interceptors.push('requestRecoverer');
}]); module.controller('ExampleController', ['$scope', '$http', function($scope, $http) {
$scope.requestTime = '[waiting]';
$http.get('https://api.github.com/users/naorye/repos').then(function() {
$scope.requestStatus = 'success';
}, function(rejectReason) {
$scope.requestStatus = 'failure due to ' + rejectReason;
});
}]);
</script>
</body>
</html>

Session 恢复 (响应异常拦截器)

有时候,我们的单页面应用中,会发生丢失 session 情况。这种情况可能由于 session 过期了或者服务器异常。我们来创建一个拦截器,用于恢复 session 然后自动重新发送原始请求(假设 session 过期的情况)。

为了演示目的,我们来假设发生了 session 过期返回 http 状态码 419。

<!-- lang: js -->
module.factory('sessionRecoverer', ['$q', '$injector', function($q, $injector) {
var sessionRecoverer = {
responseError: function(response) {
// Session has expired
if (response.status == 419){
var SessionService = $injector.get('SessionService');
var $http = $injector.get('$http');
var deferred = $q.defer(); // Create a new session (recover the session)
// We use login method that logs the user in using the current credentials and
// returns a promise
SessionService.login().then(deferred.resolve, deferred.reject); // When the session recovered, make the same backend call again and chain the request
return deferred.promise.then(function() {
return $http(response.config);
});
}
return $q.reject(response);
}
};
return sessionRecoverer;
}]);
module.config(['$httpProvider', function($httpProvider) {
$httpProvider.interceptors.push('sessionRecoverer');
}]);

以这种方式,如果后台调用失败引起 session 过期,sessionRecoverer 会创建一个新的 session 然后重新调用后台。

总结

在这篇文章里我解释了关于 AngularJS 的拦截器的知识,我介绍了 requestresponserequestError 和 responseError拦截器,以及讲解了如何/何时使用它们。我也提供了一些现实的有用的例子,你可以用在你的开发中。

我希望这篇文章能让你看得很爽,就像我写得爽那样爽。

Interceptors in AngularJS and Useful Examples

http://my.oschina.net/ilivebox/blog/290881?p=1

AngularJS 拦截器和应用例子(转)的更多相关文章

  1. AngularJS 拦截器和好棒例子

    目录[-] 什么是拦截器? 异步操作 例子 Session 注入(请求拦截器) 时间戳(请求和响应拦截器) 请求恢复 (请求异常拦截) Session 恢复 (响应异常拦截器) 总结 Intercep ...

  2. AngularJS 拦截器实现全局$http请求loading效果

    日常项目开发中,当前端需要和后端进行数据交互时,为了友好的UI效果,一般都会在前端加个loading的状态提示(包括进度条或者icon显示),数据传输或交互完成之后,再隐藏/删除loading提示. ...

  3. AngularJS 拦截器

    在需要进行身份验证时,在请求发送给服务器之前或者从服务器返回时对其进行拦截,是比较好的实现手段. 例如,对于身份验证,如果服务器返回401状态码,将用户重定向到登录页面. AngularJS通过拦截器 ...

  4. AngularJS拦截器

    AngularJS是通过拦截器提供了一个全局层面对响应进行处理的途径.拦截器实际是$http服务的基础中间件,用来向应用的业务流程中注入新的逻辑,其核心是服务工厂,通过向 $httpProvider. ...

  5. struts2学习(5)拦截器简介以及例子执行过程

    一.拦截器简介: 二.Struts2预定义拦截器&拦截器栈 在执行action之前和之后,拦截器进行了操作: 比如struts-default.xml中就有很多预定义的拦截器:   拦截器栈: ...

  6. AngularJs 拦截器,拦截请求

    问题前述 我在项目中遇到这样一个问题: 在Angular项目中,会有很多需要用户点击操作的地方,如果用户点击过快会产生多次相同请求,会吃服务器带宽,如果这是其他涉及钱有关的操作,这会产生一个致命的问题 ...

  7. Angularjs中的拦截器 (卧槽,好牛逼)

    $httpAngularJS 的 $http 服务允许我们通过发送 HTTP 请求方式与后台进行通信.在某些情况下,我们希望可以俘获所有的请求,并且在将其发送到服务端之前进行操作.还有一些情况是,我们 ...

  8. (转)Angular中的拦截器Interceptor

    什么是拦截器? 异步操作 例子 Session 注入(请求拦截器) 时间戳(请求和响应拦截器) 请求恢复 (请求异常拦截) Session 恢复 (响应异常拦截器) 转之:http://my.osch ...

  9. 浅谈Struts2拦截器的原理与实现

    拦截器与过滤器           拦截器是对调用的Action起作用,它提供了一种机制可以使开发者定义在一个action执行的前后执行的代码,也可以在一个action执行前阻止其执行.同时也是提供了 ...

随机推荐

  1. 【POJ】【1704】Georgia and Bob

    组合游戏 Nim游戏的一个变形 题解请看金海峰的博客 以下为引用: 分析:我们把棋子按位置升序排列后,从后往前把他们两两绑定成一对.如果总个数是奇数,就把最前面一个和边界(位置为0)绑定. 在同一对棋 ...

  2. [CF]codeforces round 369(div2)

    *明早起来再贴代码 A [题意] 给定n*5的方格 将横向的相邻两个变成+输出 [题解] ... B [题意] 一个n*n的正整数矩阵,有且仅有一个数为0 ,在这个位置填上一个数,使得每一列的和 每一 ...

  3. 设置Eclipse智能提示

    原地址:http://blog.csdn.net/sz_bdqn/article/details/4956162 今天有点时间,研究了一下MyEclispse的智能感知的功能.刚开始使用它时总是感觉如 ...

  4. Zabbix 集成 OneAlert 实现全方位告警

    1. 前言 告警将重要信息发送给运维「或者其他相关人」,及时发现并且处理问题.在所有开源监控软件里面,Zabbix 的告警方式无疑是最棒的.告警的方式各式各样,从 Email 告警到飞信.139/18 ...

  5. C# Log4Net配置

    Log4Net是用来记录日志的,可以将程序运行过程中的信息输出到一些地方(文件.数据库.EventLog等),日志就是程序的黑匣子,可以通过日志查看系统的运行过程,从而发现系统的问题.日志的作用:将运 ...

  6. Ubuntu环境下利用ant编译nutch2.2.1 & 配置nutch2.2.1

    /×××××××××××××××××××××××××××××××××××××××××/ Author:xxx0624 HomePage:http://www.cnblogs.com/xxx0624/ ...

  7. darwin转发时,摄像机在3G和4G模式下的参数设置

    darwin转发时,摄像机在3G和4G模式下的参数设置 我们转发的是摄像机的子码流,因为在不同的网络环境下,为了达到当前网络环境下最清晰,最流畅的目标,在转发前要根据使用的是3G还是4G及信号强度来自 ...

  8. C语言的字符测试函数

    C语言的字符测试函数 isalnum, isalpha, isdigit, isxdigit, isblank, isspace, isascii, iscntrl, ispunct, isgraph ...

  9. BS架构与CS架构的区别

    C/S结构,即Client/Server(客户机/服务器)结构,是大家熟知的软件系统体系结构,通过将任务合理分配到Client端和Server端,降低了系统的通讯开销,可以充分利用两端硬件环境的优势. ...

  10. QSS的作用需要正确设置文件编码才能起作用

    QT这个库,无非使用OO对跨平台做了绝佳的封装,这其中的主要工作也就是比较繁琐而已,但并不多么了不起.唯独其中提供的QSS功能,让我感到十分神奇,做出来的效果实在很惊艳,而使用代码却又是如此简单,而且 ...