当我谈到Angular(或一般而言)的诺言时,我有点困惑,我只是无法让它按照我想要的方式工作。
我无法共享正在使用的代码,但这是一些模型代码:
var personModule = angular.module('personModule', [], ['$routeProvider', function($routeProvider){
$routeProvider
.when('/person/:personId/cars',{
templateUrl: 'partials/personCars.html',
controller: 'personCarsController',
resolve: {
'person': resolvePerson,
'cars': resolveCars
}
});
}]);
function resolvePerson($route, personFactory){
var personId = $route.current.params.personId;
return personFactory.getPerson(personId).then(function(response){
return angular.fromJson(response).data;
});
}
function resolveCars($route, personFactory, carFactory){
var personId = $route.current.params.personId;
return personFactory.getPersonCars(personId).then(function(response){
var cars = angular.fromJson(response).data;
angular.forEach(cars, function(car){
carFactory.getModel(car.modelId).then(function(response){
car.model = angular.fromJson(response).data;
carFactory.getMaker(car.model.makerId).then(function(response){
car.model.maker = angular.fromJson(response).data;
});
});
});
return cars;
});
}
汽车的数据格式在JSON中将如下所示:
[
{
"year": "1992",
"color": "red",
"modelId": 1,
"model":
{
"name": "Corolla",
"makerId": 1,
"maker":
{
"name": "Toyota"
}
}
},
{
"year": "1998",
"color": "black",
"modelId": 1,
"model":
{
"name": "Escort",
"makerId": 2,
"maker":
{
"name": "Ford"
}
}
}
]
现在,上面的代码可以正常工作。只是当我单击链接以打开页面时,数据随着承诺的解决而有所延迟。路线等待人和汽车解决,而不是等待每辆汽车的模型和制造商解决,这就是我希望发生的事情。我已经浏览了有关Angulars和Defers的所有Angulars文档,而现在我很茫然。
编辑:
function resolveCars($route, personFactory, carFactory){
var personId = $route.current.params.personId;
var promises = [];
return personFactory.getPersonCars(personId).then(function(response){
var cars = angular.fromJson(response).data;
angular.forEach(cars, function(car){
promises.push(carFactory.getModel(car.modelId).then(function(response){
console.log("Resolving model");
car.model = angular.fromJson(response).data;
promises.push(carFactory.getMaker(car.model.makerId).then(function(response){
console.log("Resolving maker");
car.model.maker = angular.fromJson(response).data;
}));
}));
});
return $q.all(promises).then(function(){
console.log("Resolved");
return cars;
});
});
}
按建议更改了代码,现在它等待carModel解析,但没有等待carMaker。
一辆汽车的控制台输出是这样的:
Resolving model
Resolved
Resolving maker
编辑2:
解决了:)更改了
promises.push(carFactory.getMaker(car.model.makerId).then(function(response){
console.log("Resolving maker");
car.model.maker = angular.fromJson(response).data;
}));
一部分
return carFactory.getMaker(car.model.makerId).then(function(response){
console.log("Resolving maker");
car.model.maker = angular.fromJson(response).data;
});
谢谢您的帮助!我知道我的原始代码无法像我想要的那样工作,但是无法终生弄清楚如何更改它。
最佳答案
之所以会发生这种情况,是因为在您答应了路由之后,您就在路由的“ resolve”属性中定义了路由,因此就解决了。
在您的resolveCars函数中,您确实要解析汽车,然后在内部启动后台“ resolveModels”函数。但是,“汽车”已解决,您确实将其退回。后台任务不会阻止诺言的解决。
当所有汽车的模型都解析后,您可能会返回另一个只能解决的承诺。
您可以执行以下操作:
function resolveCars($route, personFactory, carFactory, $q) {
var personId = $route.current.params.personId;
return personFactory.getPersonCars(personId).then(function (response) {
var cars = angular.fromJson(response).data;
var promises = [];
var deferred = $q.defer();
angular.forEach(cars, function (car) {
var modelWithMakerPromise = carFactory.getModel(car.modelId).then(function (response) {
car.model = angular.fromJson(response).data;
return car.model;
}).then(function (model) {
return carFactory.getMaker(model.makerId).then(function (response) {
model.maker = angular.fromJson(response).data;
});
});
promises.push(modelWithMakerPromise);
};
$q.all(promises).then(function () {
defered.resolve(cars);
});
return defered.promise;
});
这未经测试,但可以正常工作并给您一个想法。
基本上,我会创建一个新的诺言,我会返回。仅当所有这些carModel Promises都解决时,此承诺才会解决。
看一下$q Api Doc
问候