<!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拦截器的更多相关文章

  1. angular http interceptors 拦截器使用分享

    拦截器 在开始创建拦截器之前,一定要了解 $q和延期承诺api 出于全局错误处理,身份验证或请求的任何同步或异步预处理或响应的后处理目的,希望能够在将请求移交给服务器之前拦截请求,并在将请求移交给服务 ...

  2. (vue.js)axios interceptors 拦截器中添加headers 属性

    (vue.js)axios interceptors 拦截器中添加headers 属性:http://www.codes51.com/itwd/4282111.html 问题: (vue.js)axi ...

  3. flume1.8 Interceptors拦截器（五）

    1. Flume Interceptors Flume有能力修改/删除流程中的events.这是在拦截器(interceptor)的帮助下完成的.拦截器(Interceptors)是实现org.apa ...

  4. springMVC之mvc:interceptors拦截器的用法

    1.配置拦截器 在springMVC.xml配置文件增加: <mvc:interceptors> <!-- 日志拦截器 --> <mvc:interceptor> ...

  5. springMVC <mvc:interceptors>拦截器的使用

    首先在springMVC.xml配置如下代码 <!-- 拦截器 --> <mvc:interceptors> <bean class="com.base.Acc ...

  6. Interceptors - 拦截器

    1.概述 Flume有能力在运行阶段修改/删除Event,这是通过拦截器(Interceptors)来实现的. 拦截器需要实现org.apache.flume.interceptor.Intercep ...

  7. vue interceptors(拦截器)

    拦截器 顾名思义: 就是半路个您劫持, 拦截器 其实在项目和自己写demo中,总会遇到请求方面需要在请求头里面做判断或者添加一些东西, 这时候 vue 中应用中axios的 interceptors  ...

  8. (转)Angular中的拦截器Interceptor

    什么是拦截器? 异步操作 例子 Session 注入(请求拦截器) 时间戳(请求和响应拦截器) 请求恢复 (请求异常拦截) Session 恢复 (响应异常拦截器) 转之:http://my.osch ...

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

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

随机推荐

  1. touchscreem

    <触摸屏种类> 常见 电阻式触摸屏 电容式触摸屏 不常见 红外线技术触摸屏 表面声波触摸屏 适量压力传感触摸屏 <原理分析> 电阻式触摸屏 如图所示,在屏幕的上下和左右加上一个 ...

  2. spring boot2集成ES详解

    一:运行环境 JDK:1.8 ES:5.6.4 二:学习内容 如何构建spring-data-elasticsearch环境? 如何实现常用的增删改查? 如何实现对象嵌套也就是1对多这种关系? 三:J ...

  3. bzoj 4176: Lucas的数论 -- 杜教筛，莫比乌斯反演

    4176: Lucas的数论 Time Limit: 30 Sec  Memory Limit: 256 MB Description 去年的Lucas非常喜欢数论题,但是一年以后的Lucas却不那么 ...

  4. hihocoder #1301 : 筑地市场 二分+数位dp

    #1301 : 筑地市场 题目连接: http://hihocoder.com/problemset/problem/1301 Description 筑地市场是位于日本东京都中央区筑地的公营批发市场 ...

  5. codevs 1073 家族 并查集

    家族 Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://www.codevs.cn/problem/1073/ Description 若某个家族 ...

  6. opencv第二课 进行缩放图片~

    #include<stdio.h> #include<iostream> #include<opencv2\opencv.hpp> using namespace ...

  7. 开发移动端web页面click事件失效问题

    这两天在做一个WAP页面,在chrome上模拟移动端的时候,都好好的,然而放到手机上测试时, 发现有些点击事件直接无反应,但是有些有反应: 难道是由于我页面上有用到滚动插件,里面的touch事件的pr ...

  8. JavaScript中的callee与caller的区别

    1.callee callee是对象的一个属性,该属性是一个指针,指向参数arguments对象的函数 作用:就是用来指向当前对象 返回正被执行的 Function 对象,也就是所指定的 Functi ...

  9. js解析顺序了解一下？？

    我们在学习一种新事物的时候,总是知其然,而不知其所然.有些人会探究到底,有一些人会得过且过. 好了,开场白结束,直接进入正题. js不像C语言那样只要编译一次之后成.exe文件之后就不用在编译可以直接 ...

  10. js单例模式详解实例

    这篇文章主要介绍了什么是单例单例模式.使用场景,提供了3个示例给大家参考 什么是单例? 单例要求一个类有且只有一个实例,提供一个全局的访问点.因此它要绕过常规的控制器,使其只能有一个实例,供使用者使用 ...