(Angular 2/4/5/6) Вложенные методы подписки с несколькими http-запросами - PullRequest
Новая
       4

(Angular 2/4/5/6) Вложенные методы подписки с несколькими http-запросами

0 голосов
/ 06 декабря 2018

Мне нужно вызвать метод подписки внутри метода подписки.

В первом методе подписки он возвращает мне deviceid, который впоследствии используется во втором методе подписки.

result=[];
idArray=[2,4];

this.subscription =
    this.quoteService.get(this.quoteid) //first api call
     .subscribe((quote: Quote) => {   
       this.deviceid = quote["deviceid"]; 
       this.faultService.get(this.deviceid) //second api call
        .pipe(first())
        .subscribe((faultGroup: FaultGroup[]) => {
        faultGroup.forEach(({ faults }) => {
          //execute logic for 2nd subscription
          if (faults) {
            faults
              .filter(
                ({ id }) => this.idArray.indexOf(id) > -1,
              )
              .forEach(fault => this.result.push(fault.name));
          }
          //end of logic
        });
      });
    subscription.unsubscribe();
  }
});

Может ли кто-нибудь научить меня, как использовать flatMap / switchMap, чтобы избежать использования вложенной подписки?Ценю вашу помощь!

1 Ответ

0 голосов
/ 06 декабря 2018

Здесь вы должны вернуть результат из второго API, просто для вызова второго API вам нужен результат из первого.Для этого switchMap() подходит вам лучше всего.Используйте его, как описано в коде. 

this.subOb = this.quoteService.get(this.quoteid) //first api call
    .pipe(switchMap((quote: Quote) => {
          // result of first API call here
        this.deviceid = quote["deviceid"];
          // you need to return the second observable from inside the switcMap
          // and this will only be executed after the first Observable(first API call) is finished
        return this.faultService.get(this.deviceid) //second api call
          // need some mode logic after second API call is done? call first()?
          // map the result with a pipe
            .pipe(map(secondData) => { 
                  // If you aren't manipulating the data 
                  // to be returned, then use tap() instead of map().
                return data;
            })

    }))
        .subscribe((data) => {
            // only one subscription is required.
            // this will have data from second API call
        })

Используйте крюк ngOnDestroy() для unsubcribe() для Subscriptions.Я вижу, что вы назначаете подписку на переменную и, вероятно, делаете то же самое, чтобы отписаться.Если ваш Observable испускает несколько раз (что я думаю, что нет), то во время первой эмиссии, когда дело доходит до subscribe(), переменная «подписка» будет неопределенной. 

ngOnDestroy() {
    if (this.subOb) {
        this.subOb.unsubscribe();
    }
}

См. Пример примераздесь: https://stackblitz.com/edit/swicthmap?file=src%2Fapp%2Fapp.component.ts

Он содержит две реализации карт переключателей, анализирует обе и использует все, что вам подходит.

...