angularjs 拦截器与全局错误处理

文章目录

用angularjs(后面简称 ng)刚开始可能会遇到这样一些疑问,ng 大多时候请求的是静态资源和片段
如何在请求片段的之前去捕获请求,并判断用户是否在登录状态 ,或者用户登录是否过期?

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

##什么是拦截器?
$httpProvider 中有一个 interceptors 数组,而所谓拦截器只是一个简单的注册到了该数组中的常规服务工厂。

1
2
3
4
5
6
7
8
9
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 数组:

1
2
3
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 延后处理。它将会在请求拦截器中延迟发送请求或者在响应拦截器中推迟响应。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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 请求则会失败。
响应拦截器的例子一样:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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 被拒绝,请求将会失败。

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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');
}]);

然后创建一个请求:

1
$http.get('https://api.github.com/users/naorye/repos');

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

1
2
3
4
5
6
7
8
9
10
11
12
13
{
"transformRequest": [
null
],
"transformResponse": [
null
],
"method": "GET",
"url": "https://api.github.com/users/naorye/repos",
"headers": {
"Accept": "application/json, text/plain, */*"
}
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
"transformRequest": [
null
],
"transformResponse": [
null
],
"method": "GET",
"url": "https://api.github.com/users/naorye/repos",
"headers": {
"Accept": "application/json, text/plain, */*",
"x-session-token": 415954427904
}
}

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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');
}]);

然后我们可以这样:

1
2
3
4
$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.');
});

完整代码: example for the Timestamp Marker

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

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

让我们来创建两个拦截器: requestRejectorrequestRecoverer

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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 拒绝了请求。

1
2
3
4
5
$http.get('https://api.github.com/users/naorye/repos').then(function() {
console.log('success');
}, function(rejectReason) {
console.log('failure');
});

完整代码: example for the Request Recover

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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 然后重新调用后台。


实际开发中,我是这么解决的,这里以java的程序举例 ,登录信息是存在session中,java会拦截所有的请求,当session过期时,直接抛出一个标志位输出给前台,前台在做相应的处理就可解决登录过期的问题了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
module.factory('sessionRecoverer', ['$q', '$injector', function($q, $injector) {
var sessionRecoverer = {
request: function (config) {
return config || $q.when(config);
},
response:function(response)
{
switch (response.status) {
case (200):
if(!angular.isObject(response.data))
{
//这里可以做自己相应的处理
if(response.data.indexOf("location.replace(\"/views/login.html\")")>0){
window.location = "/views/login.html";
}
}
break;
case (500):
alert("服务器系统内部错误");
break;
case (401):
alert("未登录");
break;
case (403):
alert("无权限执行此操作");
break;
case (408):
alert("请求超时");
break;
default:
alert("未知错误");
}
return response;
}
};
return sessionRecoverer;
}]).config(['$httpProvider', function($httpProvider) {
$httpProvider.interceptors.push('sessionRecoverer');
}]);

总结
本文摘自于 http://www.webdeveasy.com/interceptors-in-angularjs-and-useful-examples/
文章主要介绍了 request, response, requestErrorresponseError的实际应用 。