如何以角度返回多个依赖于彼此的$ http请求？

Question

我有两个url端点说:"fruitInfo"和"fruitDetails"

我想返回一个包含以下内容的对象:

var fruitInfoDetails = {"fruitInfo": <contents of fruitInfo response data>,
"fruitDetails": <contents of fruitDetails response data>}

在服务中我打电话:

var fruitInfoDetails = {};
this.getFruitInfo()
.then(function(data) {

   fruitInfoDetails['fruitInfo'] = data;
   this.getFruitDetails(data.nameOfFruit).then(function(data) {
        fruitInfoDetails['fruitDetails'] = data;      
   })
});

假设this.getFruitInfo()和this.getFruitDetauls()包含返回每个端点的$ http promise的函数.

这样做的正确/优雅方式是什么？如果有一个函数,我可以传递水果列表"[Apple,Pear,Orange]",它可以返回一个fruitInfoDetails对象的列表,这将是完美的.

Answer 1

您可以使用$ q服务制定自己的承诺,并在第二次调用完成后解决它.

angular.module('mymodule').factory('FruitService', function($http, $q) {
return {
    getFruitInfoDetails: function() {
        // make our own promise
        var deferred = $q.defer();
        // 1st call
        $http.get("fruitInfo").then(function(fruitInfo) {
            // 2nd call
            $http.get("fruitDetails").then(function(fruitDetails) {

                deferred.resolve({
                    fruitInfo: fruitInfo,
                    fruitDetails:fruitDetails
                });
            });
        });
        return deferred.promise;
    }
};
});

您还可以使用$ q.all()以等待两个请求在解析之前完成.它导致较少的缩进.

angular.module('mymodule').factory('FruitService', function($http, $q) {
return {
    getFruitInfoDetails: function() {
        // make our own promise
        var deferred = $q.defer();
        // 1st call
        var infoPromise = $http.get("fruitInfo");
        var detailsPromise = $http.get("fruitDetails");

        $q.all([infoPromise, detailsPromise]).then(function(data) {
            deferred.resolve({
                fruitInfo: data[0],
                fruitDetails: data[1]
            })
        });

        return deferred.promise;
    }
};
});

要求检索给定水果的列表:

angular.module('mymodule').factory('FruitService', function($http, $q) {

return {
    getFruitInfoDetails: function(fruit) {
        // make our own promise
        var deferred = $q.defer();

        // we'll asume that you can put the fruit as part of the path
        var infoPromise = $http.get("fruitInfo/" + fruit);
        var detailsPromise = $http.get("fruitDetails/" + fruit );

        $q.all([infoPromise, detailsPromise]).then(function(data) {
            deferred.resolve({
                fruitInfo: data[0],
                fruitDetails: data[1]
            })
        });

        return deferred.promise;
    },

    getFruitList: function(fruits) {
        var deferred = $q.defer();

        // map our list of fruits to a list of the promises of fruit info
        var allPromises = fruits.map(function (fruit) {
            return this.getFruitInfoDetails(fruit);
        });

        // wait for all the fruits to be resolved then just resolve our own promise
        $q.all(allPromises).then(function(allTheFruitInfoDetails) {
            deferred.resolve(allTheFruitInfoDetails);
        });
        return deferred.promise;
    }
};
});