AngularJS http拦截器依赖注入$http

我们可以通过在app.config()方法中调用$httpProvider.interceptors.push()方法来对app中的所有http调用增加拦截器，在拦截器中可以配置在请求发起前、发起失败后、成功返回后、返回失败后的操作，非常方便好用。

例如我们对所有的$http请求配置发起Loading正在加载的显示，当请求完成后又把Loading关闭。

app.config(['$httpProvider', function($httpProvider) {
		// 设置http拦截器
		$httpProvider.interceptors.push('httpInterceptor');
	}]);
	
	// http拦截器，设置请求自定打开和关闭Loading框
	app.factory('httpInterceptor', ['Loading', '$q', function(Loading, $q) {
		var i = 0;// 计数器
		var startLoading = function() {
			if(i++ == 0) Loading.show();// 第一次发起请求，打开Loading
		};
		var endLoading = function() {
			if(--i < 1) Loading.hide();// 所有请求完成，关闭Loading
		};
		
		return {
			request: function(cfg){// 发起请求前
				startLoading();
				return cfg;
			},
			requestError: function(rejection) {// 发起请求失败后
				endLoading();
				return $q.reject(rejection);
			},
			response: function(res) {// 成功返回后
				endLoading();
				return res;
			},
			responseError: function(rejection) {// 失败返回后
				endLoading();
				return $q.reject(rejection);
			}
		}
	}]);

其中的Loading是我自定义的一个service。

其中要注意的是：

httpInterceptor的依赖注入不能注入$http和引用了$http的服务，否则会报依赖注入错误。

原因：假如可以正常引入，你就可以在设置拦截器在http请求成功后又调用$http发起请求，又会被拦截器拦截，会导致死循环。