Angular拦截器

来源：互联网发布：诚哥战斗过的天台淘宝编辑：程序博客网时间：2024/05/22 19:10

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

拦截器是什么？

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

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

然后通过拦截器的的名字(即myInterceptor)添加到 $httpProvider.interceptors 数组:

1
2
3
module.config(['$httpProvider', function($httpProvider) {  
    $httpProvider.interceptors.push('myInterceptor');
  }]);

拦截器允许你:

通过实现 request 方法拦截request: 该方法会在$http发送请求到后台之前执行，因此你可以修改配置或做其他的操作。该方法接收请求配置对象(request configuration object)作为参数，然后必须返回配置对象或者promise 。如果返回无效的配置对象或者 promise 则会被拒绝，导致$http 调用失败。
通过实现response方法拦截response: 该方法会在$http接收到从后台过来的响应之后执行，因此你可以修改响应或做其他操作。该方法接收响应对象(response object)作为参数，然后必须返回响应对象或者promise。响应对象包括了请求配置(request configuration)，头(headers)，状态(status)和从后台过来的数据(data)。如果返回无效的响应对象或者 promise 会被拒绝，导致$http调用失败。
通过实现requestError方法拦截请求异常: 有时一个请求发送失败或者被拦截器拒绝了。requestError拦截器会捕获那些被上一个请求拦截器中断的请求。它可以用来恢复请求或者有时可以用来撤销请求之前所做的配置，比如关闭遮罩层，显示进度条，激活按钮和输入框之类的。
通过实现responseError方法拦截响应异常: 有时候我们后台调用失败了。也有可能它被一个请求拦截器拒绝了，或者被上一个响应拦截器中断了。在这种情况下，响应异常拦截器可以帮助我们恢复后台调用。

异步操作

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

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

这个例子中，request拦截器使用了一个异步操作，根据结果来更新配置。然后它用更新后的配置继续执行操作。如果 deferred

被拒绝，$http 请求则会失败。

response拦截器的例子也是一样的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 注入(request拦截器)

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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
{
    "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
{
    "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
17
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

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

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

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

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
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，虽然requestInjector 拒绝了请求。

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
28
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 credential
                //s 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 然后重新调用后台。

阅读全文

0 0