角JS解决循环依赖 [英] Angular JS solve circular dependency
问题描述
我试图执行一个HTTP拦截器http.post电话，但我得到一个
循环依赖发现：$ HTTP＆LT; - 王牌＆LT; - authInterceptor＆LT; - $ HTTP＆LT; - $ templateRequest＆LT; - $编译
我明白为什么，但我不知道如何解决它...还是新的角度和少许混乱的某个时候，我希望你能帮助我:)继承人是我的code：
VAR应用= angular.module（'AceAngularApi'，[]）;app.service（'王牌'，['$ HTTP，$ Q'，'$喷油器'，'$窗口'，函数（$ HTTP，$ Q $喷油器，$窗口）{ 变种用户=无效; VAR getCurrentUser =功能（）{
VAR URL =HTTP：//本地主机：8080 / API /的currentUser 。VAR响应= $ http.post（URL，{}），然后（功能（响应）{}）;
返回响应;
};
返回{
getCurrentUser：getCurrentUser，
}
}]）;app.factory（'authInterceptor'，['$ rootScope'，'$ Q'，'$窗口'，'$喷油器'，'王牌'，
功能（$ rootScope，$ Q $窗口，$喷油器，ACE）{
返回{
要求：功能（配置）{
config.headers = config.headers || {};
如果（$ window.localStorage.token）{
config.headers.Authorization ='承载'+ $ window.sessionStorage.token;
}
返回配置;
}，
回应：功能（响应）{
如果（response.status === 401）{
//处理情况的用户没有通过验证的情况下
}其他{
Ace.getCurrentUser（）。然后（函数（）{
的console.log（拿到当前用户）;
}）;
}
返回响应|| $ q.when（响应）;
}
};
}
]）;的app.config（函数（$ httpProvider）{
$ httpProvider.interceptors.push（'authInterceptor'）;
}）;
您正在试图定义 $ HTTP 通过注射的pre-处理功能 authInterceptor 到 $ httpProvider ，但 authInterceptor 对<$ C依赖$ C> $ HTTP ，它会导致循环依赖问题。
要解决这个循环依赖问题，您可以使用 $注射器服务要连接王牌
app.factory（'authInterceptor'，['$ rootScope'，'$ Q'，'$窗口'，'$喷油器'，
功能（$ rootScope，$ Q $窗口，$喷油器）{
返回{
回应：功能（响应）{
如果（response.status === 401）{
//处理情况的用户没有通过验证的情况下
}其他{
VAR王牌= $ injector.get（'王牌'）;
Ace.getCurrentUser（）。然后（函数（）{
的console.log（拿到当前用户）;
}）;
}
返回响应|| $ q.when（响应）;
}
};
}
]）;
另一个解决方法是注册拦截器在运行（）块，而不是一个配置（）块，但请记住，在的run（）被执行，任何呼叫到 $ HTTP 无关与 authInterceptor
I try to perform a http.post call in a http interceptor, but I get a
Circular dependency found: $http <- Ace <- authInterceptor <- $http <- $templateRequest <- $compile
I see why but I dont know how to solve it... Still new to angular and a little confusing sometime, I hope you can help me :) Heres is my code:
var app = angular.module('AceAngularApi', []);
app.service('Ace', ['$http', '$q', '$injector', '$window', function($http, $q, $injector, $window) {
var user = null;
var getCurrentUser = function() {
var url = "http://localhost:8080/api/currentuser";
var response = $http.post(url, {}).then(function(response) {});
return response;
};
return {
getCurrentUser: getCurrentUser,
}
}]);
app.factory('authInterceptor', ['$rootScope', '$q', '$window', '$injector', 'Ace',
function($rootScope, $q, $window, $injector, Ace) {
return {
request: function(config) {
config.headers = config.headers || {};
if ($window.localStorage.token) {
config.headers.Authorization = 'Bearer ' + $window.sessionStorage.token;
}
return config;
},
response: function(response) {
if (response.status === 401) {
// handle the case where the user is not authenticated
} else {
Ace.getCurrentUser().then(function() {
console.log("Got current user");
});
}
return response || $q.when(response);
}
};
}
]);
app.config(function($httpProvider) {
$httpProvider.interceptors.push('authInterceptor');
});
You are trying to define $http's pre-processing functionality by injecting authInterceptor into $httpProvider, however authInterceptor has dependency on $http, it leads to circular dependency problem.
To get around this circular dependency issue, you can use the $injector service to wire up Ace
app.factory('authInterceptor', ['$rootScope', '$q', '$window', '$injector',
function($rootScope, $q, $window, $injector) {
return {
response: function(response) {
if (response.status === 401) {
// handle the case where the user is not authenticated
} else {
var Ace = $injector.get('Ace');
Ace.getCurrentUser().then(function() {
console.log("Got current user");
});
}
return response || $q.when(response);
}
};
}
]);
Another workaround is registering the interceptor in a run() block instead of a config() block, but keep in mind, before run() is executed, any call to $http have nothing to do with authInterceptor
这篇关于角JS解决循环依赖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
