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拦截器，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关推荐
-
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Web 开发中,除了数据操作之外,最频繁的就是发起和处理各种 HTTP 请求了,加上 HTTP 请求又是异步的,如果在每个请求中来单独捕获各种常规错误,处理各类自定义错误,那将会有大量的功能类似的代码,或者使用丑陋的方法在每个请求中调用某几个自定义的函数来处理.这两种方法基本都不是靠谱之选.好在 AngularJS 提供了 Interceptors --拦截战斗机--来对应用内所有的 XHR 请求进行统一处理. 主要功能 Interceptors 有两个处理时机,分别是: 其它程序代码执行 HT
-
angular中的http拦截器Interceptors的实现
在angularJs中增加了一个对全局的http请求统一做出处理的api--interceptors Interceptors 有两个处理时机,分别是: 其它程序代码执行 HTTP 请求之后,在实际从浏览器发出请求之前,即处理请求 得到请求的响应之后,在交给其它程序代码处理之前,即处理请求的响应 其引用场景包括 全局处理错误 统一进行身份验证一类的处理 对所有发出去的请求进行预处理 对所有收到的响应进行预处理等等 使用实例如下: commonService.config(['$httpProvi
-
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-
-
分享Angular http interceptors 拦截器使用(推荐)
AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. 拦截器 在开始创建拦截器之前,一定要了解 $q和延期承诺api 出于全局错误处理,身份验证或请求的任何同步或异步预处理或响应的后处理目的,希望能够在将请求移交给服务器之前拦截请求,并在将请求移交给服务器之前将响应拦截发起这些请求的应用程序代码-拦截器利用promise
-
详解SpringMVC中使用Interceptor拦截器
SpringMVC 中的Interceptor 拦截器也是相当重要和相当有用的,它的主要作用是拦截用户的请求并进行相应的处理.比如通过它来进行权限验证,或者是来判断用户是否登陆,或者是像12306 那样子判断当前时间是否是购票时间. 一.定义Interceptor实现类 SpringMVC 中的Interceptor 拦截请求是通过HandlerInterceptor 来实现的.在SpringMVC 中定义一个Interceptor 非常简单,主要有两种方式,第一种方式是要定义的Interce
-
vue中Axios添加拦截器刷新token的实现方法
目录 1. Axios基本用法: 2. Axios基本封装用法: 3. 添加拦截器的用法 4. 注意事项: Axios是一款网络前端请求框架,基本用法如下: 1. Axios基本用法: const response = await Axios.create({ baseURL: "https://test.api.com", headers: { 'Content-Type': 'application/json', }, }).post<RequestResponse>(
-
Angular中的请求拦截的方法
目录 区分环境 添加拦截器 验证 在上一篇的文章Angular 中使用 Api 代理,我们处理了本地联调接口的问题,使用了代理. 我们的接口是单独编写的处理的,在实际的开发项目中,有众多的接口,有些需要登陆凭证,有些不需要.一个一个接口处理不妥,我们是否可以考虑对请求进行拦截封装呢? 本文章来实现下. 区分环境 我们需要对不同环境下的服务进行拦截.在使用 angular-cli 生成项目的时候,它已经自动做好了环境的区分,在 app/enviroments 目录下: environments ├
-
php类中的各种拦截器用法分析
本文实例讲述了php类中的各种拦截器用法.分享给大家供大家参考.具体用法分析如下: 1.__get( $property ) 访问未定义的属性时调用 复制代码 代码如下: class lanjie { function __get($name) { echo $name." property not found! "; } } $ob = new lanjie(); echo $ob->g; 当我们调用对象$ob未定义的属性g
-
java中的Struts2拦截器详解
最近在学习struts的拦截器,现在来总结一下. 1.拦截器是什么? 拦截器相当于过滤器:就是将不想要的去掉,想要的留下.拦截器抽象出一部分代码可以用来完善原来的action.同时可以减轻代码冗余,提高重用率.通俗地讲就是一张网,过滤掉不需要的沙子,留下水. 2.拦截器的作用: 拦截器可以构成特定的功能.比如权限认证.日志记录和登陆判断. 3.拦截器的原理: 其每一个Action请求都在拦截器中,每一个action可以将操作转交给下面的拦截器,也可以直接退出到界面上. 4.定义拦截器: (1)自
-
Android的OkHttp包中的HTTP拦截器Interceptor用法示例
OkHttp(GitHub:https://github.com/square/okhttp) 的 Interceptor 就如同名称「拦截器」一样,拦截你的 Request 做一些你想做的事情再送出去.例如: 1.自动加上使用者目前使用的语言送出去取得对应语言的回传内容. 2.将 Request 计算出这个 Request 的 sigunature 再附加上送出去. 在 okHttp 中分成 Application Interceptor 和 Network Interceptor 两种. A
-
浅析java中 Spring MVC 拦截器作用及其实现
拦截器的实现 1.编写拦截器类实现HandlerInterceptor接口: 2.将拦截器注册进springmvc框架中: 3.配置拦截器的拦截规则: 其他实现方法 WebRequestInterceptor接口: 与上一个的区别是参数区别和prehandle的方法没有返回值.没有上一个功能全,因此常用第一个. 拦截器的使用场景 处理所有请求共性问题: 1.乱码问题:用request,response参数去设置编码: 2.解决权限验证问题(是否登陆,取session对象查看): 拦截器与过滤器