angular之interceptors拦截器
<!DOCTYPE html>
<html ng-app="nickApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>interceptors</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
/*
$http service在Angular中用于简化与后台的交互过程，其本质上使用XMLHttpRequest或JSONP进行与后台的数据交互。
在与后台的交互过程中，可能会对每条请求发送到Server之前进行预处理（如加入token），或者是在Server返回数据到达客户端还未被处理之前进行预处理（如将非JSON格式数据进行转换）；
当然还有可能对在请求和响应过程过发生的问题进行捕获处理。所以Angular为我们提供了$http拦截器，用来实现上述需求。*/
/*
$httpProvider中有一个 interceptors 数组，而所谓拦截器只是一个简单的注册到该数组中的常规服务工厂。
1 首先 创建一个拦截器服务工厂
*/
angular.module('nickApp', [])
.factory('NickInterceptor', ['$q', function ($q) {
return {
// 可选，拦截成功的请求
/*
该方法会在$http发送请求到后台之前执行，因此你可以修改配置或做其他的操作。
该方法接收请求配置对象(request configuration object)作为参数，然后必须返回配置对象或者promise 。
如果返回无效的配置对象或者 promise 则会被拒绝，导致$http 调用失败
*/
request: function (config) {
// 进行预处理
// 例如加令牌
config.headers['Authorization'] = 'token666';
/*
Request Headers
token:token666 //加的令牌
*/
return config || $q.when(config);
}, // 可选，拦截成功的响应
/*
该方法会在$http接收到从后台过来的响应之后执行，因此你可以修改响应或做其他操作。
该方法接收响应对象(response object)作为参数，
然后必须返回响应对象或者promise。响应对象包括了请求配置(request configuration)，头(headers)，状态(status)和从后台过来的数据(data)。
如果返回无效的响应对象或者 promise 会被拒绝，导致$http调用失败。
*/
response: function (response) {
// 进行预处理
// 例如 JSON.parse(response)等
return response || $q.when(reponse);
}, // 可选，拦截失败的请求
/*
有时一个请求发送失败或者被拦截器拒绝了。requestError拦截器会捕获那些被上一个请求拦截器中断的请求。
它可以用来恢复请求或者有时可以用来撤销请求之前所做的配置，比如关闭遮罩层，显示进度条，激活按钮和输入框之类的。
*/
requestError: function (rejection) {
// 对失败的请求进行处理
// 例如 统一的弹窗提示 return $q.reject(rejection);
}, // 可选，拦截失败的响应
/*
有时候我们后台调用失败了。也有可能它被一个请求拦截器拒绝了，或者被上一个响应拦截器中断了。
在这种情况下，响应异常拦截器可以帮助我们恢复后台调用。
*/
responseError: function (rejection) {
// 对失败的响应进行处理
// 例如 统一的弹窗提示 return $q.reject(rejection);
}
};
}])
/*
$httpProvider中有一个 interceptors 数组，而所谓拦截器只是一个简单的注册到该数组中的常规服务工厂。
2 在config方法中，将拦截器加入到$httpProvider.interceptors数组中
*/
.config(['$httpProvider', function ($httpProvider) {
$httpProvider.interceptors.push('NickInterceptor');
}])
.controller('bodyCtl', ['$scope', '$http', function ($scope, $http) {
$scope.test1 = function () {
console.log(11);
$http.get('interceptors.html');
};
}]) </script>
</head>
<body ng-controller="bodyCtl">
<button class="btn" ng-click="test1()">click me</button>
<div ng-view></div>
</body>
</html>
angular之interceptors拦截器的更多相关文章
- angular http interceptors 拦截器使用分享
拦截器 在开始创建拦截器之前,一定要了解 $q和延期承诺api 出于全局错误处理,身份验证或请求的任何同步或异步预处理或响应的后处理目的,希望能够在将请求移交给服务器之前拦截请求,并在将请求移交给服务 ...
- (vue.js)axios interceptors 拦截器中添加headers 属性
(vue.js)axios interceptors 拦截器中添加headers 属性:http://www.codes51.com/itwd/4282111.html 问题: (vue.js)axi ...
- flume1.8 Interceptors拦截器（五）
1. Flume Interceptors Flume有能力修改/删除流程中的events.这是在拦截器(interceptor)的帮助下完成的.拦截器(Interceptors)是实现org.apa ...
- springMVC之mvc:interceptors拦截器的用法
1.配置拦截器 在springMVC.xml配置文件增加: <mvc:interceptors> <!-- 日志拦截器 --> <mvc:interceptor> ...
- springMVC <mvc:interceptors>拦截器的使用
首先在springMVC.xml配置如下代码 <!-- 拦截器 --> <mvc:interceptors> <bean class="com.base.Acc ...
- Interceptors - 拦截器
1.概述 Flume有能力在运行阶段修改/删除Event,这是通过拦截器(Interceptors)来实现的. 拦截器需要实现org.apache.flume.interceptor.Intercep ...
- vue interceptors(拦截器)
拦截器 顾名思义: 就是半路个您劫持, 拦截器 其实在项目和自己写demo中,总会遇到请求方面需要在请求头里面做判断或者添加一些东西, 这时候 vue 中应用中axios的 interceptors ...
- (转)Angular中的拦截器Interceptor
什么是拦截器? 异步操作 例子 Session 注入(请求拦截器) 时间戳(请求和响应拦截器) 请求恢复 (请求异常拦截) Session 恢复 (响应异常拦截器) 转之:http://my.osch ...
- ionic2+Angular 使用HttpInterceptorService拦截器 统一处理数据请求
sstep1:新建http-Interceptor.ts文件 import { Injectable } from '@angular/core'; import { HttpInterceptorS ...
随机推荐
- TCP可靠传输及流量控制实现原理
一.为什么TCP是可靠传输? 1. 停止等待协议 通过确认与超时重传机制实现可靠传输 在发送完一个分组后,必须暂时保留已发送的分组的副本. 分组和确认分组都必须进行编号. 超时计时器的重传时间应当比数 ...
- CSUOJ 1973 给自己出题的小X DFS
Description 小X学习了dfs,为了练习搜索,开始给自己出题玩. 玩着玩着,一会把自己难住了,一会又被自己难倒了,真是有趣诶! 小X出的题: 现在有N个不同的正整数,求它们可以组成多少个这样 ...
- 美团外卖Android平台化的复用实践
美团外卖平台化复用主要是指多端代码复用,正如美团外卖iOS多端复用的推动.支撑与思考文章所述,多端包含有两层意思:其一是相同业务的多入口,指美团外卖业务需要在美团外卖App(下文简称外卖App)和美团 ...
- Python 递归删除非空目录（包括子目录以及文件）
Python的OS模块自带rmdir和removedirs函数用于删除目录,但是两者都不能删除非空目录,以下代码定义了一个函数 remove_dir 用于删除非空目录. #作者官网 http://ww ...
- ceph部署过程中的错误
ceph版本-jewel 用ssd盘来journal ,格式分区权限问题 [ceph-node2][WARNIN] ceph_disk.main.FilesystemTypeError: Cannot ...
- Where should we fork this repository?
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha 我们应该在哪里分叉这个存储库? Where should we fork this re ...
- android OOM 内存溢出
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha 一个应用的可用内存是有限的,如果超过了可用的内存,就会内存溢出. 1,避免 已经不用的对 ...
- 【51Nod 1222】最小公倍数计数
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1222 求\([a,b]\)中的个数转化为求\([1,b]\)中的个数减去 ...
- BZOJ.3498.[PA2009]Cakes(三元环 枚举)
题目链接 感觉我可能学的假的(复杂度没问题,但是常数巨大). 一个比较真的说明见这儿:https://czyhe.me/blog/algorithm/3-mem-ring/3-mem-ring/. \ ...
- 改变手机浏览器(iPhone/Android)上文本输入框的默认弹出键盘
iPhone/iPad和Android提供不同的的键盘输入类型,触发合适的键盘将极大地改善用户体验. 键盘类型 默认: 默认键盘的字母模式 数字: 默认键盘的数字模式,(含小数点等) 邮件: 与默 ...