跟我学AngularJs:Aop拦截实例

最新推荐文章于 2021-06-19 09:36:45 发布

原创最新推荐文章于 2021-06-19 09:36:45 发布 · 4.3k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#AngularJs #AOP

AngularJs 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何在AngularJs中实现AOP拦截器，用于在ajax请求前后进行处理，例如设置请求参数和处理响应。同时展示了AOP与指令结合创建Loading动画，当发送请求时显示遮罩和动画，请求完成时自动消失。

摘要：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;
            }
        };
    });
}]);

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

这是页面加载完成后。