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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏xingoo, 一个梦想做发明家的程序员

Log4j官方文档翻译(八、文件输出)

使用org.apache.log4j.FileAppender可以把日志写到文件中: FileAppender配置 immediateFlush 这个标志默认为...

1838
来自专栏令仔很忙

新手学JAVA(八)----走进JDBC

JDBC(Java Data Base Connectivity, Java 数据库连接)是一种用于执行SQL语句的JavaAPI,可以为多种关系数据库提供统一...

701
来自专栏微服务生态

深入淘宝Diamond之客户端架构解析

diamond是淘宝内部使用的一个管理持久配置的系统,它的特点是简单、可靠、易用,目前淘宝内部绝大多数系统的配置,由diamond来进行统一管理。 diamo...

693
来自专栏一名合格java开发的自我修养

RPC原来就是Socket——RPC框架到dubbo的服务动态注册,服务路由,负载均衡演化

  序:RPC就是使用socket告诉服务端我要调你的哪一个类的哪一个方法然后获得处理的结果。服务注册和路由就是借助第三方存储介质存储服务信息让服务消费者调用。...

622
来自专栏java初学

关于mybatis的思考(1)——mybatis的使用实例

33413
来自专栏高爽的专栏

Oracle学习记录

       oracle学习过程中记录的一些知识点,包括sqlplus一些命令、角色、DML、DCL、DDL、数据字典、表空间、函数。 1. sys 超级管...

1840
来自专栏哎_小羊

resin4.0.44+websocket 实现私信功能服务端消息推送

最近项目开发中,碰到一个新的开发需求——私信功能。 项目要求:类似微博中发送私信功能,给对方发送一条私信消息,如果对方在线就立马接受到消息提示,并显示到页面上。...

2255
来自专栏友弟技术工作室

Beego Models 之 一ORM 使用方法

beego ORM 是一个强大的 Go 语言 ORM 框架。她的灵感主要来自 Django ORM 和 SQLAlchemy。

1013
来自专栏北京马哥教育

varnish学习总结

什么是web cache? Web缓存是指一个Web资源(如html页面,图片,js,数据等)存在与Web服务器和客户端(浏览器)直接的副本。缓存会根据进来...

2765
来自专栏Java Web

初学Java Web(5)——cookie-session学习

HTTP 协议 Web 浏览器与 Web 服务器之间的一问一答的交互过程必须遵守一定的规则,这样的规则就是 HTTP 协议。 HTTP 是 hypertext ...

2815

扫描关注云+社区