当我谈到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

问候

09-10 02:49
查看更多