[英]How to return multiple $http request that depend on each other in angular?
I have two url endpoints say: "fruitInfo" and "fruitDetails" 我有两个URL端点:“ fruitInfo”和“ fruitDetails”
I want to return an object that contains: 我想返回一个包含以下内容的对象:
var fruitInfoDetails = {"fruitInfo": <contents of fruitInfo response data>,
"fruitDetails": <contents of fruitDetails response data>}
Inside a service I call: 在服务中,我称之为:
var fruitInfoDetails = {};
this.getFruitInfo()
.then(function(data) {
fruitInfoDetails['fruitInfo'] = data;
this.getFruitDetails(data.nameOfFruit).then(function(data) {
fruitInfoDetails['fruitDetails'] = data;
})
});
Assume the this.getFruitInfo() and this.getFruitDetauls() contains functions that return the $http promise going to each of those endpoints. 假设this.getFruitInfo()和this.getFruitDetauls()包含一些函数,这些函数返回去往每个端点的$ http Promise。
What is the proper/elegant way to do this? 正确/优雅的方法是什么? If there is a function that I could pass a list of fruits "[Apple, Pear, Orange]", and it could return me a list of fruitInfoDetails objects, that would be perfect. 如果有一个函数可以传递水果列表“ [Apple,Pear,Orange]”,并且可以返回一个FruitInfoDetails对象列表,那将是完美的。
You can make your own promise using the $q service, and resolve it when the 2nd call completes. 您可以使用$ 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;
}
};
});
You can also use $q.all() in order to wait for both requests to finish before resolving. 您也可以使用$ q.all()以便在解析之前等待两个请求完成。 It result in less indentation. 这样可以减少缩进。
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;
}
};
});
The requested retrieving a list of given fruits: 请求检索给定水果的列表:
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;
}
};
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.