how to call second API after first API result is retrieved

Question

I have a API which called the bank end :

this.http.get(`http://localhost:44301/consentinitiation/${this.qid}`)
.pipe(retryWhen(_ => {
  this.showIt=true
  return interval(1000)
}))
.subscribe(result => {result
console.log(result);
this.qrcodelink=result["qrCodeLink"];
setTimeout(() => {
    this.loadingSpinner=false;
   }, 5000);

     })

It has a result and has a status which is "Recieved" after that i should call the API again unstil i get the status "Finalized" and dont how to call the API again ,after the first call is finished,because if i write it below the first one i guess they will call the simultaneously,any idea?

Does this answer your question? [How to make one Observable sequence wait for another to complete before emitting?](https://stackoverflow.com/questions/30519645/how-to-make-one-observable-sequence-wait-for-another-to-complete-before-emitting) — Get Off My Lawn, Aug 15 '21 at 21:02
@GetOffMyLawn i need to make it to promise and then use "THEN" for the second call right?but how can i make the first one topromise without change the structure,because it throws error when i change subscribe to promise — moris62, Aug 15 '21 at 21:31
Do you need to call the same endpoint, using the same parameters? — Octavian Mărculescu, Aug 15 '21 at 22:15

Дмитрий Васильев · Answer 1 · 2021-08-17T11:08:29.030

the problem that u describe in description is called polling ( make request in interval until u got an expected result )

here is poll implementation in rxjs way

  makeSomeRequestsToBank() {
    this.http.get('https://').pipe(
      switchMap(result => {
        // if status is recieved, start polling
        if (result.status === 'Recieved') {
          return this.pollStatus();
        }

        if (result.status === 'Finalized') {
           return of(result)
        }

        // else do some thing else, depends on u business logic
        // keep in mind that switchMap should return an observable for futher chaining
        return of(undefined);
      }),
    ).subscribe(result => { 
     if (!result) return;
     this.qrcodelink=result["qrCodeLink"];
     setTimeout(() => {
       this.loadingSpinner=false;
     }, 5000);
  }

  pollStatus(): Observable<any> {
    const POLLING_INTERVAL = 700; // poll in ms
    const isSuccessFn = (response: string) => response === 'Finalized'; // the condition to stop polling and return result

    return timer(0, POLLING_INTERVAL).pipe(
      switchMap(() => this.http.get('https://')),
      skipWhile(response => isSuccessFn(response)),
    );
  }

the result.status is unknown ,dont know why,result should contains status — moris62, Aug 16 '21 at 20:31
it is boilerplate code, could u provide object that your api returned? — Дмитрий Васильев, Aug 16 '21 at 21:16
ok, you should make an if expression, that if result.status === 'Finalized', than do some business logic, for example just return result to subscribe, i will update the answer — Дмитрий Васильев, Aug 17 '21 at 11:05

score 1 · Answer 2 · answered Aug 17 '21 at 18:29

You can do it with using Promise.

ngOnInit(){
 this.callFirstApi();
}

firstApi(): Promise<any> {
    return new Promise((resolve, reject) => {
      this.http.get(API_URL).subscribe((data) => {
        resolve(data);
      }, (error) => {
        reject(error);
      });
    });
  }

secApi(): Promise<any> {
        return new Promise((resolve, reject) => {
          this.http.get(API_URL).subscribe((data) => {
            resolve(data);
          }, (error) => {
            reject(error);
          });
        });
      }

callFirstApi(){
   this.firstApi().then(response => {
      this.callSecApi();
   }).catch(err => {
   })
}

callSecApi(){
   this.secApi().then(response => {

   }).catch(err => {
   })
}

how to call second API after first API result is retrieved

2 Answers2