微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

详解AngularJS中的http拦截

http拦截

,即$http服务允许我们与服务端交互,有时候我们希望在发出请求之前以及收到响应之后做些事情。 $httpProvider包含了一个interceptors的数组。

我们这样创建一个interceptor。

rush:js;"> app.factory('myInterceptor',['$log',function($log){ $log.debug('');

var myInterceptor = {};

return myInterceptor;
}])

接着注册interceptor.

rush:js;"> app.config(['$httpProvider',function($httpProvider){ $httpProvider.interceptors.push('myInterceptor'); }])

以下是$http拦截的一些例子。

拦截器中的异步操作

rush:js;"> app.factory('myInterceotpr','someAsyncServcie',function($q,someAsyncServcie){ var requestInterceptor = { request: function(config){ var deferred = %q.defer(); someAsyncService.doAsyncoperation().then(function(){ ... deferred.resolve(config); },function(){ ... deferred.resolve(config); }) return deferred.promise; } };

return requestInterceptor;
})

以上,是一个请求拦截,做了一个异步操作,根据异步操作的结果来更新config

当然也有响应拦截

rush:js;"> app.factory('myInterceptor',['$q','someAsyncService',someAsyncSercice){ var responseInterceptor = { response: function(response){ var deferred = $q.defer(); someAsyncService.doAsyncoperation().then(function(response){ ... deferred.resolve(response); },function(response){ ... deferred.resolve(response); }) return deferred.promise; } }; return responseInterceptor; }])

■ Session拦截,请求拦截

服务端有2种类型的验证,一个是基于cookie的,一种是基于token的。对于基于token验证,当用户登录获取一个来自服务端的token,这个token在每一次请求时发送给服务端。

创建一个有关session的injector:

rush:js;"> app.factory('sessionInjector',['SessionService',function(SessionService){ var sessionInjector = { request: function(config){ if(!SessionService.isAnonymous){ config.headers['x-session-token'] = SessionService.token; } return config; } };

return sessionInjector;
}])

可见,把从服务端返回的token放在了config.headers中。

注册injector:

rush:js;"> app.config(['$httpProvider',function($httpProvider){ $httpProvider.interceptors.push('sessionInjector'); }])

发出一个请求:

rush:js;"> $http.get('');

拦截前大致是:

rush:js;"> { "transformRequest":[null],"transformResponse":[null],"method":"GET","url":"","headers":{ "Accept": "application/json,text/plain,*/*" } }

拦截后,在headers中多两个一个x-session-token字段:

rush:js;"> { "transformRequest":[null],*/*","x-session-token":...... } }

■ 时间戳,请求和响应拦截

rush:js;"> app.factory('timestampMarker',[function(){ var timestampMarker = { request:function(config){ config.requestTimestamp = new Date().getTime(); return config; },response: function(response){ response.config.responseTimestamp = new Date().getTime(); return config; } };

return timestampMarker;
}])

以上,在请求和响应时拦截,在config.requestTimestamp和config.responseTimestamp赋上当前的时间。

注册拦截器:

rush:js;"> app.config(['$httpProvider',function($httpProvider){ $httpProvider.interceptors.push('timestampMarker'); }])

然后在运用的时候可以算出请求响应所耗去的时间。

rush:js;"> $http.get('').then(function(response){ var time = response.config.responseTime - response.config.requestTimestamp; console.log('请求耗去的时间为 ' + time); })

■ 请求错误恢复,请求拦截

模拟一个请求拦截错误情形:

rush:js;"> app.factory('requestRejector',function($q){ var requestRejector = { request: function(config){ return $q.reject('requestRejector'); } }; return requestRejector; }])

拦截请求错误

rush:js;"> app.factory('requestRecoverer',function($q){ var requestRecoverer = { requestError: function(rejectReason){ if(rejectReason === 'requestRejector'){ //恢复请求 return { transformRequest:[],transformResponse:[],method:'GET',url:'',headers:{ Accept:'application/json,*/*' } }; } else { return $q.reject(rejectReason); } } };

return requestRecoverer;
}])

注册拦截器:

rush:js;"> app.config(['$httpProvider',function($httpProvider){ $httpProvider.interceptors.push('requestRejector'); $httpProvider.interceptors.push('requestRecoverer'); }])

■ Session错误恢复,响应拦截

rush:js;"> app.factory('sessionRecoverer','$injector',$injector){ var sessionRecoverer = { responseError: function(response){ //如果Session过期 if(response.status == 419){ var SessionService = $injector.get('SessionService'); var $http = $injector.get('$http'); var deferred = $q.defer();
//创建<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>新的session
SessionService.login().then(deferred.resolve,deferred.reject);

return deferred.promise.then(function(){
 reutrn $http(response.con<a href="https://www.jb51.cc/tag/fig/" target="_blank" class="keywords">fig</a>);
})

}
return $q.reject(response);
}
};

return sessionRecoverer;
}])

以上就是本文的全部内容,希望对大家的学习有所帮助。

原文地址:https://www.jb51.cc/js/50183.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐