Qfyilyi

I want to reach an API that returns data in pages of 50 items, but I dont know how many items (and therefore pages) there are.

My idea is to send 20 requests in parallel, each one will request the ith page and then the ith+20 page, and so on, until a page returns blank, in which case I end.

With this approach I would do at most 20 unnecessary requests.

The thing is, I don't know how to structure this loop using observables.

I imagined something like this:

return Observable.from(_.range(0, 20))

  .map((pageNo) => fetchPage(pageNo))

  .while((page) => isValid(page));

but this while method or similars dont exist/work

I found this similar question but he uses interval, which seems inefficient RxJs Observable interval until reached desired value

From my understanding, I can't use takeWhilebecause it validates the condition already met, and not a response of the request still to be made.

This might help

return Observable.from(_.range(0, 20)).pipe(

    mergeMap(pageNo => ajax.getJSON(`/api/fetchPage/${pageNo}`).pipe(

        mergeMap(result => 

            of(addPersonFulfilled(result), secondFunc(foo)),

            retryWhen(error => tap(console.log('error on page', error)))

        )           

    ))

)

You can create 20 requests and wait for all of them to complete with forkJoin and then use takeWhile to complete the chain when the array of results is empty:

const fetchPage = page => {

  ...

  return forkJoin(...);

};



range(0, 20).pipe(

  concatMap(page => fetchPage(page)),

  takeWhile(arr => arr.length > 0),

)

.subscribe(console.log);

Complete demo: https://stackblitz.com/edit/rxjs-zw1sr2?devtoolsheight=60