我正在建筑和AngularJS应用程序使用ES6类与痕迹扩散到ES5的AMD格式.
在我的模块中,我导入拦截器类并将其注册为服务,然后使用module.config中的$httpProvider.interceptors注册此服务：
var commonModule = angular.module(moduleName,[constants.name]);
import authenticationInterceptor from './authentication/authentication.interceptor';
commonModule.service('authenticationInterceptor',authenticationInterceptor);
commonModule.config( $httpProvider => {
$httpProvider.interceptors.push('authenticationInterceptor');
});
我的拦截器类注入$q和$window服务,将它们保存在构造函数中供以后使用.我使用调试器跟随这部分,注入正常进行：
'use strict';
/*jshint esnext: true */
var authenticationInterceptor = class AuthenticationInterceptor {
/* ngInject */
constructor($q,$window) {
this.$q = $q;
this.$window = $window;
}
responseError(rejection) {
var authToken = rejection.config.headers.Authorization;
if (rejection.status === 401 && !authToken) {
let authentication_url = rejection.data.errors[0].data.authenticationUrl;
this.$window.location.replace(authentication_url);
return this.$q.defer(rejection);
}
return this.$q.reject(rejections);
}
}
authenticationInterceptor.$inject = ['$q','$window'];
export default authenticationInterceptor;
当我发出一个响应401的请求时,拦截器触发器相应地触发,但是在’responseError’方法中,’this’变量指向窗口对象而不是我的拦截器,所以我没有访问权限$q或这一点.$窗口.
我不知道为什么？有任何想法吗？
上下文(this)将丢失,因为Angular框架只保留对处理函数本身的引用,并直接调用它们,而没有任何上下文,如
alexpods所指出的.
我最近写了一篇关于使用TypeScript编写$http拦截器的博文,这也适用于ES6类：AngularJS 1.x Interceptors Using TypeScript.
为了总结我在这篇文章中讨论过的内容,为了不在你的处理程序中丢失,你必须将方法定义为箭头函数,有效地将函数直接放在编译的ES5代码中的类的构造函数中.
class AuthenticationInterceptor {
/* ngInject */
constructor($q,$window) {
this.$q = $q;
this.$window = $window;
}
responseError = (rejection) => {
var authToken = rejection.config.headers.Authorization;
if (rejection.status === 401 && !authToken) {
let authentication_url = rejection.data.errors[0].data.authenticationUrl;
this.$window.location.replace(authentication_url);
return this.$q.defer(rejection);
}
return this.$q.reject(rejections);
}
}
如果你真的坚持把拦截器写成一个完全基于原型的类,你可以为拦截器定义一个基类并扩展它.基类将用实例方法替换原型拦截器函数,所以我们可以这样编写我们的拦截器：
class HttpInterceptor {
constructor() {
['request','requestError','response','responseError']
.forEach((method) => {
if(this[method]) {
this[method] = this[method].bind(this);
}
});
}
}
class AuthenticationInterceptor extends HttpInterceptor {
/* ngInject */
constructor($q,$window) {
super();
this.$q = $q;
this.$window = $window;
}
responseError(rejection) {
var authToken = rejection.config.headers.Authorization;
if (rejection.status === 401 && !authToken) {
let authentication_url = rejection.data.errors[0].data.authenticationUrl;
this.$window.location.replace(authentication_url);
return this.$q.defer(rejection);
}
return this.$q.reject(rejections);
}
}
