跟我学AngularJs:Aop拦截实例

摘要：config配置一般都是用来设置请求参数等，可以认为应用它可对angularjs自带的一些方法进行包装。而AOP，它是面向切面编程，全称是Aspect Oriented Programming,有用过Spring的同学都知道，AOP是一种动态代理机制。是对一些方法进行拦截后处理。然后再接着运行方法。而反应在AngularJS其实也就是对请求进行拦截，然后根据不同的拦截时机，有请求前、请求成功后、请求失败后相就的来做处理。当然，你也可以在其它sericve上加拦截，使用aop与指令结合，可以做很强大的功能。

一、AOP拦截实例

现在要做的是拦截每一个ajax请求

首先先写一个serice。

appCommon.factory('addLoadingHttpInterceptor',function ($q,$window,$rootScope) {
    $rootScope.ActiveAjaxConectionsWithouthNotifications = 0;
    var checker = function(parameters,status){
            if(status == "request"){
                $rootScope.ActiveAjaxConectionsWithouthNotifications+=1;//每发送一个ajax就+1
                $rootScope.loading_view = true;
            }
            if(status == "response"){
                $rootScope.ActiveAjaxConectionsWithouthNotifications-=1;//每返回一个ajax就-1

            }
            if($rootScope.ActiveAjaxConectionsWithouthNotifications<=0){
                $rootScope.ActiveAjaxConectionsWithouthNotifications=0;
                $rootScope.loading_view = false;
                $rootScope.loading_show = false;
            }
    };
    return {
    'request': function(config) {
        checker(config,"request");
        return config;
    },'requestError': function(rejection) {
       checker(rejection.config,"request");
      return $q.reject(rejection);
    },'response': function(response) {
         checker(response.config,"response");
      return response;
    },'responseError': function(rejection) {
        checker(rejection.config,"response");
      return $q.reject(rejection);
    }
  };
});

然后在config中配置

appCommon.config(function($httpProvider) {
		
	//AOP增强,用来判断是否显示loading动画
	$httpProvider.interceptors.push('addLoadingHttpInterceptor');
});

或者将上面两个合在一起写也可以，类似如下：

module.config(['$httpProvider',function ($httpProvider) {
    $httpProvider.interceptors.push(function ($q,$rootScope) {
        if ($rootScope.activeCalls == undefined) {
            $rootScope.activeCalls = 0;
        }

        return {
            request: function (config) {
                $rootScope.activeCalls += 1;
                return config;
            },requestError: function (rejection) {
                $rootScope.activeCalls -= 1;
                return rejection;
            },response: function (response) {
                $rootScope.activeCalls -= 1;
                return response;
            },responseError: function (rejection) {
                $rootScope.activeCalls -= 1;
                return rejection;
            }
        };
    });
}]);

好了，现在可以看看是否可以：

这是页面加载完成后。

这是页面在请求ajax中：

二、AOP与指令结合做Loading动画

上面的图片看到没，笔者自己写了个Loading的指令，然后每次发送ajax请求时，都会在整个页面加一个遮罩，然后出来如上动画。直到请求结果返回才消失。