日常项目开发中,当前端需要和后端进行数据交互时,为了友好的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');
}]);

参考文章:

为Angular内置$http服务添加拦截器

AngularJS 拦截器实现全局$http请求loading效果的更多相关文章

  1. AngularJS 拦截器和应用例子(转)

    $httpAngularJS 的 $http 服务允许我们通过发送 HTTP 请求方式与后台进行通信.在某些情况下,我们希望可以俘获所有的请求,并且在将其发送到服务端之前进行操作.还有一些情况是,我们 ...

  2. AngularJS 拦截器和好棒例子

    目录[-] 什么是拦截器? 异步操作 例子 Session 注入(请求拦截器) 时间戳(请求和响应拦截器) 请求恢复 (请求异常拦截) Session 恢复 (响应异常拦截器) 总结 Intercep ...

  3. AngularJs 拦截器,拦截请求

    问题前述 我在项目中遇到这样一个问题: 在Angular项目中,会有很多需要用户点击操作的地方,如果用户点击过快会产生多次相同请求,会吃服务器带宽,如果这是其他涉及钱有关的操作,这会产生一个致命的问题 ...

  4. AngularJS 拦截器

    在需要进行身份验证时,在请求发送给服务器之前或者从服务器返回时对其进行拦截,是比较好的实现手段. 例如,对于身份验证,如果服务器返回401状态码,将用户重定向到登录页面. AngularJS通过拦截器 ...

  5. angular 用拦截器统一处理http请求和响应 比如加token

    想使用angularjs里的htpp向后台发送请求,现在有个用户唯一识别的token想要放到headers里面去,也就是{headres:{'token':1}} index.html里引入以下js: ...

  6. AngularJS拦截器

    AngularJS是通过拦截器提供了一个全局层面对响应进行处理的途径.拦截器实际是$http服务的基础中间件,用来向应用的业务流程中注入新的逻辑,其核心是服务工厂,通过向 $httpProvider. ...

  7. Struts2 在登录拦截器中对ajax请求的处理

    前言: 由于ajax请求不像http请求,可以直接进行页面跳转,你返回的所有东西,ajax都只会识别为一个字符串. 之前尝试的方法是在拦截器中返回一个标识给ajax,然后再在每一个ajax请求成功之后 ...

  8. ionic2+Angular 使用HttpInterceptorService拦截器 统一处理数据请求

    sstep1:新建http-Interceptor.ts文件 import { Injectable } from '@angular/core'; import { HttpInterceptorS ...

  9. java拦截器与过滤器打印请求url与参数

    HttpServletRequest httpServletRequest = (HttpServletRequest) request; HttpServletResponse httpServle ...

随机推荐

  1. C++参数传递(01)

    *是取值运算符,对地址使用可以获得地址中储存的数值:对于指针a,*a表示取a中的值 &是地址运算符,对变量使用可以获得该变量的地址. 对于变量b,*b表示取b的地址 别名(引用):主要用于做函 ...

  2. Windows下swoole扩展的编译安装部署

    1. 到cygwin官网下载cygwin. 官网地址:https://www.cygwin.com/ 2. 打开下载好的cygwin安装包,开始安装cygwin. 选择cygwin的安装目录(这个同时 ...

  3. SQL Server本地连接不上

    1.打开SQL Server 2014配置管理器 2.启动服务

  4. js和jquery实现监听键盘事件

    一.使用javascript实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"& ...

  5. Grunt参考

    Grunt参考: http://www.cnblogs.com/yexiaochai/p/3603389.html http://blog.csdn.net/wangfupeng1988/articl ...

  6. grunt任务自动管理

    Grunt管理工具使用: 一.模块安装 1.在项目的根目录里新建package.json文件,形式如下,指定依赖的库以及版本信息. 2.然后在项目根目录下,执行 npm install ,安装json ...

  7. progress 相关事件 异步 ajax

    loadstart — Fires when the fi rst byte of the response has been received.progress — Fires repeatedly ...

  8. 使用spring框架中的组件发送邮件

    首先进入自己的QQ邮箱,在设置中修改账户信息 然后来至底部  点击开启,再用手机发送对应信息到指定号码,然后点击我已发送  获取授权码  注意提示: 到这里,相信你已经开通了SMTP服务,这样就可以在 ...

  9. Red Hat 7.0 DNS服务配置笔记

    先挂载镜像,然后配置yum,然后安装yum install -y bind 配置静态 IP.DNS就是他本身的IP地址. 修改DNS的配置文件,在后面加入区域配置信息.vim /etc/named.c ...

  10. 疑似CPU或者内存故障导致进程崩溃

    我们有一个服务跑在微软云的所有宿主机上.最近发现某一台机器上该服务进程持续崩溃.崩溃原因是访问了一个无效指针,对应的代码如下 serviceListIniBuffer.AppendF("Se ...