The request after Subscription calling is not fired

user_3405920 0
Viewed 61

I need to call two services in the OnInit step. But the second request could not be sent And I was obliged to call them dependently, but I think this is not the proper coding.(All of the services sides of the backend are Transient )

This is my component.cs code (when the second service this.planService was not called):


  planList: Array<any>;
  countActive: any;
  sub: Subscription;

  ngOnInit() {
    this.sub = this.referralService
      .getAll()
      .pipe(first())
      .subscribe((response) => {
        this.countActive = response.data;
      });
    this.planService
      .getAll()
      .pipe(first())
      .subscribe((r: any) => {
        this.planList = r.map(item => ({
          value: item.name, planDetail: {
            percentage: item.profitPercent,
            month: item.duration
          }
        }));
      });
  }
  ngOnDestroy() {
    this.sub.unsubscribe();
  }

I decided to call them dependently (calling the second service in subscription) like below, but I think this is not wellformed:

 
  ngOnInit() {
       this.sub = this.referralService
      .getAll()
      .pipe(first())
      .subscribe((response) => {
        this.countActive = response.data;
        this.planService
          .getAll()
          .pipe(first())
          .subscribe((r: any) => {
            this.planList = r.map(item => ({
              value: item.name, planDetail: {
                percentage: item.profitPercent,
                month: item.duration
              }
            }));
          });
      });
   }

referral.service.ts:

@Injectable({ providedIn: "root" })
export class ReferralService {

  constructor(private http: HttpClient) {}

  getAll() {
    return this.http.get<any>(`${environment.apiUrl}/referral/activeCount/`);
  }
}

plan.service.ts:

@Injectable({providedIn: 'root'})
export class PlanService {

  constructor(private http: HttpClient) {}

  getAll() {
    return this.http.get<Plan[]>(`${environment.apiUrl}/plan`);
  }
}

I would be happy to find out why the first code sample does not work.

angular subscription
1 Answers

Can't explain why in the first example subscription to planService didn't work. Technically speaking, they both should work. Perhaps something else is going on in this.planService that we don't see? Please elaborate second request could not be sent. What did you expect to happen, but did not happen?

Anyway to prettify this, we could use some rxjs to combine observables. Not having much contex I chose combineLatest so when each observable emits, we run tasks in subscribe().

  planList: Array<any>;
  countActive: any;
  unsubscribe$: Subject<void> = new Subject();

  ngOnInit() {

      combineLatest(this.referralService.getAll(), this.planService.getAll())
      .pipe(takeUntil(this.unsubscribe$))
      .subscribe([allReferrals, allPlans]) => {
        if (allReferrals) {
          this.countActive = allReferrals.data;
        }
        if (allPlans) {
          this.planList = allPlans.map(item => ({
            value: item.name, planDetail: {
              percentage: item.profitPercent,
              month: item.duration
            }
          })
        }
      }
  }

  ngOnDestroy() {
   this.unsubscribe$.next();
  }
user_154397330
Related