Angular4 可观察链

Question

我对可观察链有问题，一张地图不等待响应，它破坏了我的想法。我有这样的东西。我里面有组件和功能。

Step3组件

  addCardAndGotoStep3() {
      this.checkout.newCard = this.appNewCard.newCard;
      this.checkout.addCardAndGotoStep3(this.appNewCard).subscribe();
  }

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

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

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);
            });
    };

我对这部分代码有疑问

 .map( () => {
            // billingUtilService.addCardUi(vm)
            return this.billingUtilService.addCardByRest(this);
        })
        .switchMap( (newCardId) => {
            const model = {};
            console.warn('newCardId' + newCardId);
            console.error(newCardId);

switchMap 不会等待来自 addCardByRest 的 return。我混淆了什么吗？其他服务 return 是可观察的，所以我不得不使用一些扁平化运算符，但实际上它不起作用。

控制台输出：

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

Answer 1

使用 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
    }

Angular4 可观察链

Angular4 Chain of observables

rxjs

typescript

reactivex

angular