Angularjs拦截器_angularjs $httpprovider

本篇文章参考自：https://my.oschina.net/ilivebox/blog/290881

前言：

今天在公司项目中碰到了拦截器这个东西，顾名思义，拦截器就是为了拦截某个东西，项目中的拦截器都是组长封装好的，自己也不懂，所以就问了问度娘，结合网上的讲解，在此总结一下

什么是拦截器？

顾名思义，拦截器就是为了拦截某一个东西~~~
$httpAngularJS 的 $http 服务允许我们通过发送 HTTP 请求方式与后台进行通信。在某些情况下，我们希望可以俘获所有的请求，并且在将其发送到服务端之前进行操作。还有一些情况是，我们希望俘获响应，并且在完成完成调用之前处理它。一个很好例子就是处理全局 http 异常(在本公司的项目中也是捕捉响应，处理全局http异常，在后面会张贴代码)。拦截器(Interceptors)应运而生。本文将介绍 AngularJS 的拦截器，并且给几个有用的例子。

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

module.factory('myInterceptor',['$log',function($log){   // 就是一个服务
	$log.debug('$log在这里向您展示这是一个常规的注入工厂');
	var myInterceptor={};
	...
	...
	return myInterceptor;
}])
1
2
3
4
5
6
7

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

<!-- lang: js -->
module.config(['$httpProvider', function($httpProvider) { // config是配置服务的
    $httpProvider.interceptors.push('myInterceptor');
}]);
1
2
3
4

拦截器允许我们做哪些操作，有什么作用

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

上面这个例子中，请求拦截器使用了一个异步操作，根据结果来更新配置。然后它用更新后的配置继续执行操作。如果 deferred 被拒绝，http 请求则会失败。
响应拦截器的例子和上面的一样.
只有当 deferred 被解析，请求才算成功，如果 deferred 被拒绝，请求将会失败。

例子

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

###Session拦截，请求拦截

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

下面的 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'); //放到拦截器中
}]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

然后创建一个请求

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

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

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

被 sessionInjector 拦截之后的配置对象是这样的: 将token加到了请求头

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

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

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

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

以上，在请求和响应时拦截，在config.requestTimestamp和config.responseTimestamp赋上当前的时间。

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

下面是时间戳(请求和响应拦截器)的完整代码

<!doctype html>
<html>
	<head> 
		<title>Timestamp Marker Example</title>
        <script src="../../angularjs/angular-1.5.8/angular.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>
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
40
41

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

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

让我们来创建两个拦截器: 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');
}]);
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

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

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

完整代码: http://www.webdeveasy.com/code/interceptors-in-angularjs-and-useful-examples/request-recover.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');
}]);
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

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

总结

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

最后，把在项目中用到的拦截器写在下面

首先创建一个拦截器（在appService.js中,后面写项目结构的组成的时候会写到）；

//发送请求统一带上token
app.factory('authInterceptor', ["$rootScope", "$cookies", "$injector", "$q", "$location", function ($rootScope, $cookies, $injector, $q, $location) {
    return {
        request: function (config) {
            config.headers = config.headers || {};
            var headerName = 'Authorization';
            var cookieName = 'XSRF-TOKEN';
            //检查cookie是否存在
            if ($cookies.get(cookieName) == undefined || $cookies.get(cookieName) == '') {
                $location.path('/Index');
            }
            else {
                config.headers[headerName] = 'Bearer ' + $cookies.get(cookieName);
            }

            //设置不缓存
            config.headers["X-Requested-With"] = 'XMLHttpRequest';
            config.headers["Cache-Control"] = "no-cache";
            config.headers['Pragma'] = 'no-cache';

            return config;
        },
        responseError: function (response) {
            abp.ui.clearBusy("#mianBody");
            abp.ui.clearBusy($('.modal-content'));//清除Modal遮罩层
            //401服务端返回授权失败
            if (response.status == 401) {
                var msg = "您访问的接口未授权，请联系管理员";// response.data.error.message || 
                abp.message.warn(msg, "提示");
            } else if (response.status == 400) {
                abp.message.warn("您输入的参数不符合规范，请重新核对", "提示");
            } else if (response.status == 403) {
                abp.message.warn("您没有接口访问权限，请联系管理员", "提示");
            } else if (response.status == 500 && response.data.error.code == 200)//code为200需要提示到界面的错误信息
            {
                abp.message.warn(response.data.error.message, "提示");
            }
            else {
                var errorData = "<div><p>" + response.status + ":" + response.statusText + "</p>" +
                    "<p>请求接口为：" + response.config.url + "</p>"
                    + "</div>"

                if (response.data.error && response.data.error.message) {
                    errorData += "<p>" + response.data.error.message + "<p>";
                }

                var topMenuId = $location.search().topMenuId;
                $location.path("/error").search({ topMenuId: topMenuId, errorData: errorData });
                return $q.reject(response);
            }

            //else
            //    if (response.status === 404) {
            //    $location.path('/Index');
            //    return $q.reject(response);
            //}
        },
        response: function (response) {
            return response;
        }
    };
}]);
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

运用拦截器
写在app.js里(app.js是配置服务的,后面写项目架构组成的时候会写到)；

app.config([
	'$httpProvider',function($httpProvider){
		$httpProvider.interceptors.push('authInterceptor');
	}
])
1
2
3
4
5

这样一来就会把拦截器里的请求前，请求后，以及全局异常处理都会用到接口上。大大提高了效率。