AngularJS 拦截器实现全局$http请求loading效果

最新推荐文章于 2023-06-09 15:30:32 发布

dccc43727

最新推荐文章于 2023-06-09 15:30:32 发布

阅读量513

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ui 前端 ViewUI

原文链接：http://www.cnblogs.com/kenz520/p/6858626.html

本文介绍如何使用AngularJS的拦截器来全局优化前端加载状态，减少代码重复并提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

日常项目开发中，当前端需要和后端进行数据交互时，为了友好的UI效果，一般都会在前端加个loading的状态提示（包括进度条或者icon显示），数据传输或交互完成之后，再隐藏/删除loading提示。

一般简单的做法就是在每个请求的业务逻辑前添加/显示loading，交互完成再删除/隐藏loading。

但是这样代码重复度高，每个请求的地方都需要编写一遍，比较繁琐。对开发人员来说，write less，do more！最好不过了，可以避免自己漏写等人为的不确定错误。

为此，我们可以利用angularjs拦截器，来实现全局的优化方案。

var myApp = angular.module('myApp', []);  
     myApp.config(["$httpProvider", function ($httpProvider) {   
         $httpProvider.interceptors.push('myInterceptor');  
     }]);  
        
     //loading  
     myApp.factory('myInterceptor', ["$rootScope", function ($rootScope) {  
         var timestampMarker = {  
             request: function (config) { 
          　　　　//start 
                 $rootScope.loading = true;  
                 return config;  
             },  
             response: function (response) { 
　　　　　　　　 　//end 
                $rootScope.loading = false;  
                 return response;  
             }  
         };  
         return timestampMarker;  
     }]);

什么是拦截器–What are Interceptors?

Interceptor(拦截器)在服务端框架中属于一种比较常见的机制。拦截器提供了一种机制可以使开发者可以定义在一个action(动作)执行的前后执行的代码，这些代码可以是在一个action执行前阻止其执行的代码,也可以是修改目标动作某些行为的代码.(在AOP（Aspect-Oriented Programming）中拦截器用于在某个方法或字段被访问之前，进行拦截然后在之前或之后加入某些操作。

$http服务中的拦截器

查看API或是源码我们可以发现,Angular的实现中通过

Angular中如何声明一个拦截器

//Interceptor declaration
module.factory('httpInterceptor', ['$log', function($log) {
    $log.debug('$log is here to show you that this is a regular factory with injection');
    return { 
        // do something
    };
}]);

如何将声明的拦截器注册到$http服务中

// Add the interceptor to $httpProvider.interceptors
module.config(['$httpProvider', function($httpProvider) {  
    $httpProvider.interceptors.push('httpInterceptor');
}]);

通过上面的简单两个步骤,我们基本就完成了