angularjs 拦截器学习笔记

文章参考

http://my.oschina.net/ilivebox/blog/290881

在工作中，遇到一个需求 —— 如何判断用户是否已经登录，session是否有效。

思路一：

第一次进来获取登录用户信息，然后缓存到一个服务中，使用拦截器每次发送请求，就传递用户信息给后台

思路二：

用户输入个人账号信息登录，然后每次利用拦截器接受后台返回的响应结果，根据响应结果判断是否session是否有效

扫描二维码关注公众号，回复： 407492 查看本文章

概念：

$httpProvider 中有一个 interceptors 数组，而所谓拦截器只是一个简单的注册到了该数组中的常规服务工厂。

通过实现 request 方法拦截请求: 该方法会在 $http 发送请求道后台之前执行，因此你可以修改配置或做其他的操作。该方法接收请求配置对象(request configuration object)作为参数，然后必须返回配置对象或者 promise 。如果返回无效的配置对象或者 promise 则会被拒绝，导致 $http 调用失败。
通过实现 response 方法拦截响应: 该方法会在 $http 接收到从后台过来的响应之后执行，因此你可以修改响应或做其他操作。该方法接收响应对象(response object)作为参数，然后必须返回响应对象或者 promise 。响应对象包括了请求配置(request configuration)，头(headers)，状态(status)和从后台过来的数据(data)。如果返回无效的响应对象或者 promise 会被拒绝，导致 $http 调用失败。
通过实现 requestError 方法拦截请求异常: 有时候一个请求发送失败或者被拦截器拒绝了。请求异常拦截器会俘获那些被上一个请求拦截器中断的请求。它可以用来恢复请求或者有时可以用来撤销请求之前所做的配置，比如说关闭进度条，激活按钮和输入框什么之类的。
通过实现 responseError 方法拦截响应异常: 有时候我们后台调用失败了。也有可能它被一个请求拦截器拒绝了，或者被上一个响应拦截器中断了。在这种情况下，响应异常拦截器可以帮助我们恢复后台调用。

/**
 * 定义ApiService服务
 * 功能：专门向服务器发送post 和 get请求
 * */
angular.module('huangbiaoApp')
	.factory('sessionInteceptor', function() {
		
		var myInterceptor = {};
		
		//该方法接收请求配置对象(request configuration object)作为参数，然后必须返回配置对象或者 promise 。
		myInterceptor.request = function(requestConfig){
			console.log("myInterceptor.request : " + requestConfig);
			return requestConfig;
		};

		//该方法接收响应对象(response object)作为参数，然后必须返回响应对象或者 promise。
		myInterceptor.response = function(responseObject){
			console.log("myInterceptor.response : " + responseObject);
			return responseObject;
		};
		
		myInterceptor.requestError  = function(rejectReason){
			var deferred = $q.defer();
			
			console.log("myInterceptor.requestError : " + responseObject);
			return deferred.promise;
		};
		
		myInterceptor.responseError = function(responseError){
			console.log("myInterceptor.responseError : " + responseObject);
			return {};
		};

		
		return myInterceptor;
	});

备注：

1、注意拦截器request 和 response 的参数分别是请求对象和响应对象

2、注意拦截器request 和 response 的返回值是对象或者是 promise对象

/**
 * 添加拦截器
 * */
angular.module('huangbiaoApp')
	.config(function ($stateProvider, $ionicConfigProvider,$httpProvider) {
		//禁用所有缓存
		$ionicConfigProvider.views.maxCache(0);
		
		//添加拦截器
		$httpProvider.interceptors.push('sessionInteceptor');
		
		$stateProvider
			//首页
			.state('index', {
				url: '/index',
				templateUrl: 'templates/wap/indexContent.html',
				controller: "indexController"
			})
			//其他页面
			.state('one_page', {
				url: '/one_page',
				templateUrl: 'templates/wap/onePage.html',
				controller: "onepageController"
			})
	});

angular 拦截器不能注入 $state $http等信息，否则会爆出“循环依赖”错误，导致应用起不来.

angularjs 拦截器学习笔记

猜你喜欢