[英]Angular async promise is not chaining correctly to give back 1st call in order to make 2nd call
I want to return a zipcode before I call a 2nd service, so that -- from what I thought I know -- I can wrap in a promise, and then ask for the promise later. 我想在调用第二项服务之前返回一个邮政编码,以便-根据我的了解-我可以包装一个承诺,然后稍后再要求该承诺。 So I figured I would just place my 2nd service inside the promise of the 1st service.
所以我想我将把第二项服务放在第一项服务的承诺之内。 But chaining promises this way is not being friendly.
但是链接承诺这种方式并不友好。
Angular factory is called up and inside the factory method: 角工厂调用和内部工厂方法:
var userGeoPromise = userService.getGeoposition().then(function (geoposition) {
vm.geoposition = geoposition;
return addressService.reverseGeocode(geoposition.coords);
}).then(function (data) {
vm.currentLocation = googleService.googleAddressComponentsToAddress(data.results[0]);
zipCodeCurrent = vm.currentLocation.zip;
});
Notice 2 things above: 注意上面的两件事:
var userGeoPromise
var userGeoPromise
zipCodeCurrent
is set which contains the zipcode zipCodeCurrent
,其中包含邮政编码 Promise Testing works fine: 承诺测试工作正常:
userGeoPromise.then( function() {
console.log('should always show', zipCodeCurrent);
});
2nd service call: 第二次服务电话:
userGeoPromise.then( function() {
var serviceBase = "http://localhost:2295/api/getservicezip/"+ zipCodeCurrent;
var serviceZipPromise = $http.get(serviceBase);
return serviceZipPromise.then(function (results) {
console.log('serviceZipPromise', results);
return results.data;
});
});
But now the site modal just spins when I put the serviceZipPromise.then
... inside the other promise. 但是现在当我将
serviceZipPromise.then
... 放入另一个promise时,站点模式只是旋转了。
Switch the order and add in 2 separate error handlers ( which is a good practice btw) 切换顺序并添加2个单独的错误处理程序(顺便说一句,这是一个好习惯)
var serviceZipPromise = $http.get(serviceBase); // call up
return serviceZipPromise.then(function (results) {
console.log('should always show', zipCodeCurrent);
userGeoPromise.then(function () {
//console.log('serviceZipPromise', results);
console.log('inside servicezip ', zipCodeCurrent);
}, function (err) { // error from userGeoPromise
console.log(err);
});
return results.data; // THIS will return the data
}, function (err) { // outer error, this was switched
console.log(err);
});
This should not error, but for your real serviceBase
to end up using the zip code, u might have to execute it a bit later 这应该不会出错,但是为了使您的真实
serviceBase
最终使用邮政编码,您可能需要稍后再执行它
UPDATE answer for you 为您更新答案
// created part of the api call
var xserviceBase = "http://localhost:2295"; // this looks to be your base
return userGeoPromise.then(function(){
return $http.get(xserviceBase + '/api/getserviceablezip/' + zipCodeCurrent).then(function(results){
return results.data;
})
});
Yes, I know that the 3 returns look a bit nasty, but it should work 是的,我知道3个退货看起来有点讨厌,但是应该可以
In a then
callback you should return the result value, not assign it to zipCodeCurrent
(or any other variable). 在
then
回调中,您应该返回结果值,而不是将其分配给zipCodeCurrent
(或任何其他变量)。 You did this correctly in the first then
callback, but you should apply the same principle in the second: 您在第一个
then
回调中正确地做到了这一点,但是在第二个中应该应用相同的原理:
var userGeoPromise = userService.getGeoposition().then(function (geoposition) {
vm.geoposition = geoposition;
return addressService.reverseGeocode(geoposition.coords);
}).then(function (data) {
vm.currentLocation = googleService.googleAddressComponentsToAddress(data.results[0]);
return vm.currentLocation.zip; // *** return it
});
NB: I did not touch the assignments to the properties of vm
, but normally you should avoid mutating variables which (apparently) exist outside of the scope of these callback functions. 注意:我没有碰到
vm
属性的分配,但是通常您应该避免对那些(显然)存在于这些回调函数范围之外的变量进行突变。
The Promise test would look like this: Promise测试如下所示:
userGeoPromise.then( function(zipCodeCurrent) { // *** add the argument
console.log('should always show', zipCodeCurrent);
});
The 2 nd service has a nested then
call, which is something to avoid. 第二个服务有一个嵌套的
then
调用,这是可以避免的。 Instead of calling a then
on a nested, intermediate promise, return that promise, and apply the then
on the main promise chain: 而不是在嵌套的中间promise上调用
then
,而是返回该promise,然后将then
应用于主promise链:
userGeoPromise.then( function(zipCodeCurrent) { // *** add the argument as in the test
var serviceBase = "http://localhost:2295/api/getservicezip/"+ zipCodeCurrent;
return $http.get(serviceBase); // *** return the promise
}).then( function (results) { // *** move the then-callback to the outer chain
console.log('serviceZipPromise', results);
return results.data;
}).catch( function (error) { // *** add error handling at the end of the chain
console.log('error occurred:', error);
});
Note how the nesting level is never more than 1. 请注意嵌套级别永远不会超过1。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.