[英]Angular4 Chain of observables
I have a problem with chain of observables, one map doesn't wait for response and it destroys my idea. 我对可观测链有问题,一张地图不等待响应,这破坏了我的想法。 I have something like this.
我有这样的东西。 I have components and functions inside.
我里面有组件和功能。
Step3Component Step3Component
addCardAndGotoStep3() {
this.checkout.newCard = this.appNewCard.newCard;
this.checkout.addCardAndGotoStep3(this.appNewCard).subscribe();
}
CheckoutComponent CheckoutComponent
addCardAndGotoStep3 (newCardForm) {
if( !newCardForm.isValid) { return; }
// billingUtilService.checkout.newCard = vm.newCard;
return this.initPaymentMethods()
.map( () => {
// billingUtilService.addCardUi(vm)
return this.billingUtilService.addCardByRest(this);
})
.switchMap( (newCardId) => {
const model = {};
console.warn('newCardId' + newCardId);
console.error(newCardId);
const card: any = {};
card.uuid = newCardId;
card.fourDigits = this.newCard.cardNumber.slice(-4);
card.name = this.newCard.name;
card.id = card.fourDigits;
this.billingUtilService.checkout.screenPaymentMethod = card;
this.routeService.gotoState('app.loggedIn.team.checkout.step-3');
return newCardId;
})
.catch( (response) => {
this.alertService.addValidationAlert(this.tr.TR_CARD_NOT_ACCEPTED);
return Observable.throw({response});
});
};
BillingUtilService BillingUtilService
addCardByRest(vm) {
const req = this.createPaymentMethodRequest(vm.newCard);
return this.billingRest.addAccountPaymentMethod(req)
.map( (paymentMethodId) => {
console.warn('successs' + paymentMethodId);
return paymentMethodId;
})
.catch( (response) => {
console.log('it doesnt work');
return Observable.throw(response);
});
BillingRestService BillingRestService
addAccountPaymentMethod (accountPaymentMethodRequest) {
return this.http.post(this.restUrl + this.restPrefix + '/addAccountPaymentMethodCC', accountPaymentMethodRequest, {observe: 'response'})
.map( (response: any) => {
if (! this.utilService.isDefined(response.body)) {
return Observable.throw({});
}
return response.body.paymentMethodId;
})
.catch((response) => {
this.logger.debug("addAccountPaymentMethodCatch")
this.logger.exception('addAccountPaymentMethod : Ajax Error')(response);
return Observable.throw(response);
});
};
I have a problem with this part of code 我对这部分代码有疑问
.map( () => {
// billingUtilService.addCardUi(vm)
return this.billingUtilService.addCardByRest(this);
})
.switchMap( (newCardId) => {
const model = {};
console.warn('newCardId' + newCardId);
console.error(newCardId);
that switchMap doesn't wait for return from addCardByRest. 该switchMap不等待addCardByRest返回。 Did i confuse something ?
我混淆了什么吗? Other service returns an observable, so i had to use some flattening Operator, but actually it doesn't work.
其他服务返回一个可观察到的值,因此我不得不使用一些展平的运算符,但实际上它不起作用。
Console output: 控制台输出:
newCardId[object Object] checkout-controler.service.ts
Observable {_isScalar: false, source: Observable, operator: CatchOperator} checkout-controler.service.ts
succes: [here is the RightUUid] checkout-controler.service.ts
Use concatMap and subscribe to the last observable instead of using switchmap. 使用concatMap并订阅最后一个可观察对象,而不是使用switchmap。
.concatMap( () => {
// billingUtilService.addCardUi(vm)
return this.billingUtilService.addCardByRest(this);
})
.subscribe( (newCardId) => {
const model = {};
console.warn('newCardId' + newCardId);
console.error(newCardId);
}, error => {
// Do something with error here instead of catch
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.