AngularJS。在服务中解决承诺后如何更新指令?
AngularJS. How to update a directive after a promise is resolved in a service?
这是我 的跟进。
我有一个 AJAX 请求需要一些时间。假设我得到了两部分数据,var1 和 var2。我只想在绑定到主控制器范围的指令中使用 var1
var1: '=',
我从服务中得到了 var1 和 var2 的组合,但由于它们有不同的用途,我不能简单地使用我从 $http 调用中获得的一个承诺。
我尝试实现它,但它仍然无法正常工作。该服务具有以下形式:
myModule.service('MyService', ['$http', '$q', function($http, $q) {
var var1 = $q.defer();
var var2 = $q.defer();
httpPromise = $http({
url: "/myService",
method: "GET",
params: {}
}).success(function(data, status) {
var1.resolve(data.var1);
var2.resolve(data.var2);
})
return {
getVar1: function() {
return var1.promise;
},
getVar2: function() {
return var2.promise;
},
}
}]);
在控制器中,我按如下方式分配承诺:
$scope.var1 = MyService.getVar1();
$scope.var2 = MyService.getVar2();
然而,一旦承诺在服务中得到解决,指令似乎不知道 var1 的值已更改。我认为这将由 AngularJS 引擎处理。
在我看来,这里唯一的方法是进行大量的 then() 调用,这会引入更多的混乱而不是好的。我想我会留下来(我想是一个丑陋的 hack...)
$scope.$watch('var1', ...)
在指令里面,除非有人告诉我更好的方向。
在我看来你只需要打一个 then()
电话,使用 then()
是使用承诺的正确方法:
指令内:
var1.then(function (value) {
// use the resolved value
});
关于 promise 的一些旁注:
这是多余的:
return {
getVar1: function() {
return var1.promise;
},
getVar2: function() {
return var2.promise;
},
}
你可以这样做:
return {
var1Promise: var1.promise,
var2Promise: var2.promise,
};
然后像这样访问它们:
$scope.var1 = MyService.var1Promise;
得到完全相同的结果。
您也已成为 deferred antipattern 的牺牲品,它实际上在您的代码中引入了错误(如果您的 $http
调用失败,您将无法捕获错误)。
您可以在没有延迟的情况下实现您的服务,代码行更少,最重要的是具有捕获错误的能力,如下所示:
myModule.service('MyService', ['$http', '$q', function($http, $q) {
var httpPromise = $http({
url: "/myService",
method: "GET",
params: {}
});
return {
var1Promise: httpPromise.then(function (response) {
return response.data.var1;
}),
var2Promise: httpPromise.then(function (response) {
return response.data.var2;
}),
};
}]);
我同意你的看法,所有那些 .then()
的电话都不是世界上最美丽的景象。当箭头函数得到广泛支持时,我会很高兴。
这是我
我有一个 AJAX 请求需要一些时间。假设我得到了两部分数据,var1 和 var2。我只想在绑定到主控制器范围的指令中使用 var1
var1: '=',
我从服务中得到了 var1 和 var2 的组合,但由于它们有不同的用途,我不能简单地使用我从 $http 调用中获得的一个承诺。
我尝试实现它,但它仍然无法正常工作。该服务具有以下形式:
myModule.service('MyService', ['$http', '$q', function($http, $q) {
var var1 = $q.defer();
var var2 = $q.defer();
httpPromise = $http({
url: "/myService",
method: "GET",
params: {}
}).success(function(data, status) {
var1.resolve(data.var1);
var2.resolve(data.var2);
})
return {
getVar1: function() {
return var1.promise;
},
getVar2: function() {
return var2.promise;
},
}
}]);
在控制器中,我按如下方式分配承诺:
$scope.var1 = MyService.getVar1();
$scope.var2 = MyService.getVar2();
然而,一旦承诺在服务中得到解决,指令似乎不知道 var1 的值已更改。我认为这将由 AngularJS 引擎处理。
在我看来,这里唯一的方法是进行大量的 then() 调用,这会引入更多的混乱而不是好的。我想我会留下来(我想是一个丑陋的 hack...)
$scope.$watch('var1', ...)
在指令里面,除非有人告诉我更好的方向。
在我看来你只需要打一个 then()
电话,使用 then()
是使用承诺的正确方法:
指令内:
var1.then(function (value) {
// use the resolved value
});
关于 promise 的一些旁注:
这是多余的:
return {
getVar1: function() {
return var1.promise;
},
getVar2: function() {
return var2.promise;
},
}
你可以这样做:
return {
var1Promise: var1.promise,
var2Promise: var2.promise,
};
然后像这样访问它们:
$scope.var1 = MyService.var1Promise;
得到完全相同的结果。
您也已成为 deferred antipattern 的牺牲品,它实际上在您的代码中引入了错误(如果您的 $http
调用失败,您将无法捕获错误)。
您可以在没有延迟的情况下实现您的服务,代码行更少,最重要的是具有捕获错误的能力,如下所示:
myModule.service('MyService', ['$http', '$q', function($http, $q) {
var httpPromise = $http({
url: "/myService",
method: "GET",
params: {}
});
return {
var1Promise: httpPromise.then(function (response) {
return response.data.var1;
}),
var2Promise: httpPromise.then(function (response) {
return response.data.var2;
}),
};
}]);
我同意你的看法,所有那些 .then()
的电话都不是世界上最美丽的景象。当箭头函数得到广泛支持时,我会很高兴。