AngularJS 拦截器实现全局$http请求loading效果
日常项目开发中,当前端需要和后端进行数据交互时,为了友好的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的实现中通过 httpProvider提供了一个名为interceptors的数组.这个数组接受拦截器服务注册,通过过程次的注册最终会形成拦截器链.这样每次在调用http服务的时候,angular都会通过我们定义的拦截点(切面)进行相应的Ajax动作修改.
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');
}]);
通过上面的简单两个步骤,我们基本就完成了http服务的拦截器编写与添加.但是上面的代码片段并不能实际使用,要想真正的实现拦截操作,我们还需要遵循http服务暴露出来的可以进行拦截的点进行相关的代码编写.
$httpProvider暴露了那些可以拦截的点?
request : request方法可以实现拦截请求: 该方法会在 http发送请求到服务器之前执行,因此我们可以在该方法的视线中修改配置或做其他的操作。该方法接收请求配置对象(requestconfigurationobject)作为参数,然后必须返回配置对象或者promise。如果返回无效的配置对象或者promise则会被拒绝,导致http 调用失败。
response : response方法可以实现拦截响应: 该方法会在 http接收到从服务器过来的响应之后执行,因此我们可以修改响应报文或做其他操作。该方法接收响应对象(responseobject)作为参数,然后必须返回响应对象或者promise。响应对象包括了请求配置(requestconfiguration),头(headers),状态(status)和从后台过来的数据(data)。如果返回无效的响应对象或者promise会被拒绝,导致http 调用失败。
requestError : requestError方法可以实现拦截请求异常: 有时候一个请求发送失败或者被拦截器拒绝了。请求异常拦截器会俘获那些被上一个请求拦截器中断的请求。它可以用来恢复请求或者有时可以用来撤销请求之前所做的配置,比如说关闭进度条,激活按钮和输入框什么之类的。
responseError : responseError方法可以实现拦截响应异常: 有时候我们后台调用失败了。也有可能它被一个请求拦截器拒绝了,或者被上一个响应拦截器中断了。在这种情况下,响应异常拦截器可以帮助我们恢复后台调用。
对于上面暴露出来的接口使用也是异常的简单的,我们可以像声明一个简单的服务一样声明一个$http服务的拦截器,并交由angular的注入机制去使用我们配置的拦截器.
//如同声明一个Angular服务一样声明一个拦截器
module.factory('sessionInjector', ['authService', function (authService){
return {
request: function (config){
if (!authService.isAnonymus) {
config.headers['x-session-token'] = authService.token;
}
return config;
}
};
}]); // 然后将我们声明的拦截器添加到$httpProvider的拦截器链中,之后的服务注入Angular会负责帮我们完善
module.config(['$httpProvider', function ($httpProvider){
$httpProvider.interceptors.push('sessionInjector');
}]);
参考文章:
AngularJS 拦截器实现全局$http请求loading效果的更多相关文章
- AngularJS 拦截器和应用例子(转)
$httpAngularJS 的 $http 服务允许我们通过发送 HTTP 请求方式与后台进行通信.在某些情况下,我们希望可以俘获所有的请求,并且在将其发送到服务端之前进行操作.还有一些情况是,我们 ...
- AngularJS 拦截器和好棒例子
目录[-] 什么是拦截器? 异步操作 例子 Session 注入(请求拦截器) 时间戳(请求和响应拦截器) 请求恢复 (请求异常拦截) Session 恢复 (响应异常拦截器) 总结 Intercep ...
- AngularJs 拦截器,拦截请求
问题前述 我在项目中遇到这样一个问题: 在Angular项目中,会有很多需要用户点击操作的地方,如果用户点击过快会产生多次相同请求,会吃服务器带宽,如果这是其他涉及钱有关的操作,这会产生一个致命的问题 ...
- AngularJS 拦截器
在需要进行身份验证时,在请求发送给服务器之前或者从服务器返回时对其进行拦截,是比较好的实现手段. 例如,对于身份验证,如果服务器返回401状态码,将用户重定向到登录页面. AngularJS通过拦截器 ...
- angular 用拦截器统一处理http请求和响应 比如加token
想使用angularjs里的htpp向后台发送请求,现在有个用户唯一识别的token想要放到headers里面去,也就是{headres:{'token':1}} index.html里引入以下js: ...
- AngularJS拦截器
AngularJS是通过拦截器提供了一个全局层面对响应进行处理的途径.拦截器实际是$http服务的基础中间件,用来向应用的业务流程中注入新的逻辑,其核心是服务工厂,通过向 $httpProvider. ...
- Struts2 在登录拦截器中对ajax请求的处理
前言: 由于ajax请求不像http请求,可以直接进行页面跳转,你返回的所有东西,ajax都只会识别为一个字符串. 之前尝试的方法是在拦截器中返回一个标识给ajax,然后再在每一个ajax请求成功之后 ...
- ionic2+Angular 使用HttpInterceptorService拦截器 统一处理数据请求
sstep1:新建http-Interceptor.ts文件 import { Injectable } from '@angular/core'; import { HttpInterceptorS ...
- java拦截器与过滤器打印请求url与参数
HttpServletRequest httpServletRequest = (HttpServletRequest) request; HttpServletResponse httpServle ...
随机推荐
- 3分钟利用TurnipBit制作电子时钟
转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 欢迎加入讨论群 64770604 TurnipBit(www.turnipbit.com)是一个面向青少年的开发板 ...
- 已安装Fedora的U盘无法格式化,要求reinitialize layout
错误提示:This partition cannot be modified because it contains a partition table; >please reinitializ ...
- px em rem的详解与区别
在前端项目开发中,px,em,以及rem都是页面布局常用的单位,虽然它们是长度单位,但是所含的意义不一样.通过复习和查阅,总结了以下知识. px像素(Pixel) 定义:相对长度单位.像素px是相对于 ...
- 基于Nginx+redis的Asp.net站点搭建
剧情介绍 在传统的信息系统(比如小规模的ERP\MES系统),往往只是进行简单的应用服务器和数据库服务器的分布式部署,以此来提高应用系统的负载能力,而伴随着访问的增大,应用服务器层面除了做硬件和网络的 ...
- Again Stone Game
Alice and Bob are playing a stone game. Initially there are n piles of stones and each pile contains ...
- jQuery插件实现瀑布留布局masonry + infinitescroll 图片高度处理
jQuery插件实现瀑布留布局masonry + infinitescroll . 使用官方的示例代码实际测试发现,当上传到服务器的时候,由于图片下载速度问题,导致图片高度不能被正确识别,从而造成层的 ...
- JavaScript系列----函数(Function)篇(4)
1.什么是函数? 在W3C中函数的定义是这么说的:函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. 诚然,从这种抽象的定义中我们得不到什么有价值的东西.下面,举例来列举出函数的几种定义 ...
- java 数据分页
分页逻辑 import lombok.Data; /** * User eric * Date * Email yq@aso.ren */ @Data public class PageHelper ...
- eclipse使用jrebel
注:以下都是网上收集整理的,可能不全,仅限于学习和研究使用. JavaRebel是一个工具,主要是用于热加载,比如说在Tomcat之类的应用服务器中,更新了class或者某些资源文件,使用了JRebe ...
- [转载] linux中文件描述符fd和文件指针flip的理解
转载自http://www.cnblogs.com/Jezze/archive/2011/12/23/2299861.html 简单归纳:fd只是一个整数,在open时产生.起到一个索引的作用,进程通 ...