Repeat HTTP call until the desired value is returned with RxJs

Question

I need to repeat the query if the field of the returned object has the value 'INPROGRESS' with a delay so as not to clog up the server. If another field value is returned, the loop stops and I perform some action in subscribe() with its response.

My attempts so far have ended up with this code, where unfortunately the queries repeat infinitely.

this.service
.query(id: number)
.pipe(
  repeatWhen(obs => obs.pipe(delay(1000))),
  filter((response) => response.Status === 'INPROGRESS'),
  take(1),
)
.subscribe(...)

The functionality you are looking for can be achieved by using [skipWhile](https://rxjs.dev/api/index/function/skipWhile) — Jayme, Aug 18 '22 at 07:30

score 4 · Accepted Answer · answered Aug 18 '22 at 06:50

rxjs has expand operator which will allow us to make recurive api call

Try this

 this.service
      .query(id: number)
      .pipe(
        delay(1000),
        expand((response: any) => {
          if (response.Status === 'INPROGRESS') {
            return return this.service
          .query(id: number).pipe(delay(1000));
          }
          return EMPTY;
        }),
        takeLast(1)
      )
      .subscribe(...)

score 1 · Answer 2 · answered Aug 18 '22 at 06:42

with a recursie function, something like this should do the job:

private myFunc(){
    this.myRecursiveFunc(1).subscribe(response => console.log(response));
}


private myRecursiveFunc(id: number, response?:any):Observable<any>{
    if(response && response.Status !== 'INPROGRESS'){
        return of(response);
    }
    return this.service.query(id).pipe(
        delay(1000),
        concatMap(response => this.myRecursiveFunc(id, response)
    );
}

Eddy Lin · Answer 3 · 2022-08-24T09:37:07.960

1

RxJS 6.x

this.service.query(id: number).pipe(
  repeatWhen(delay(1000)),
  skipWhile((response) => response.Status === 'INPROGRESS'),
  take(1),
).subscribe(...)

https://stackblitz.com/edit/rxjs-cc1ekf

RxJS 7.5.x

this.service.query(id: number).pipe(
  repeat({ delay: 1000 }),
  skipWhile((response) => response.Status === 'INPROGRESS'),
  take(1),
).subscribe(...)

https://stackblitz.com/edit/rxjs-kafps9

edited Aug 24 '22 at 09:37

answered Aug 18 '22 at 07:03

Eddy Lin

513
2
6

@TalVik99, Try this https://stackblitz.com/edit/angular-ivy-slvov1 – Eddy Lin Aug 22 '22 at 02:43

ruth · Answer 4 · 2022-08-18T12:35:19.487

This is the straight forward way I could think of without any recursions.

timer function to emit a value at a regular interval
switchMap operator to trigger the HTTP request for each emit from timer
filter operator to stop triggering the subscribe's next callback for each emit.
takeWhile operator with inclusive parameter set to true to close the observable based on a condition and emit the last value that failed the condition. This could in this case also be take(1) since our filter condition would block the other emits.

const RESPONSE_IN_PROGRESS: string = 'INPROGRESS';
const POLL_INTERVAL: number = 1000;

timer(0, POLL_INTERVAL).pipe(
  switchMap(() => this.service.query(id)),              // <-- trigger the request
  filter((res: any) =>                                  // <-- stop triggering subscribe `next` callback for each emit
    res.Status !== RESPONSE_IN_PROGRESS
  ),         
  takeWhile(                                            
    (res: any) => res.Status === RESPONSE_IN_PROGRESS,  // <-- close the observable when the condition fails
    true                                                // <-- emit the last notification that failed the condition
  ) 
).subscribe({
  next: (res: any) => {
    // handle response
  },
  error: (error: any) => {
    // handle error
  }
});

Repeat HTTP call until the desired value is returned with RxJs

4 Answers4

Linked