CODEWITHSUNDEEP
angularsynchronizationsubscription
Rexam
Rexam

Reputation: 913

Angular synchronous calls with observables

I have a situation where I defined a variable diary: Diary in my typescript file. When the user clicks a certain save button I have to execute f1, a function having the following structure:

public f1() {
   if (condition 1) {
      this.service.serviceCall(param).subscribe(res =>
         diary.firstPage.push(res)
      )
   }

   if (condition 2) {
       this.service.serviceCall(param).subscribe(res =>
          diary.secondPage.push(res)
   }

   if (condition 3) { ... }

   ...
}

f1() is executed before f2() which does the following:

public f2() {
   this.diaryService.saveDiary(diary).subscribe();
}

Since f1 modifies the diary label, I have to make sure that f2 is executed only after all the subscriptions of f1 have been completed. How can I do that?

Upvotes: 1

Views: 357

Answers (1)

Ashish Ranjan
Ashish Ranjan

Reputation: 12960

Considering a Promise approach should be easy here, where you wait for all the responses and then finally make a save call:

public async f1() {
  try {
    if (condition 1) {
        const res = await this.service.serviceCall(param).toPromise();
        diary.firstPage.push(res)
    }

    if (condition 2) {
        const res = await this.service.serviceCall(param).toPromise();
        diary.secondPage.push(res)
    }

    //at the end
    this.f2();

  } catch() {
    // something heer
  }
}

This can also be tackled using maybe forkJoin, where you prepare the an array of Observables based on the conditions and finally make the f2 call in forkJoin subscription. This gives you an advantage of parallel calls.

ForkJoin

public f1() {
  const allApis: any = {};
  
  if (condition 1) {
    allApis.firstPage = this.service.serviceCall(param);
  }

  if (condition 2) {
      allApis.secondPage = this.service.serviceCall(param);
  }

  //at the end
  forkJoin(allApis).pipe(tap((responses) => {
    Object.entries(responses).forEach(([k, v]) => {
      diary[k].push(v)
    });
  })).subscribe(() => {
    this.f2()
  });
}

Upvotes: 2

Related Questions