Angular 8 中的链式后端请求

Question

I have a paged backend service that supports basic pagination so it can provide page x from the backend.

I would like to call a service called refresh on all objects in the DB.

The first page tells me how manny pages I need to get.

From there I need to iterate over the other pages and perform. the refresh action

I would prefer to do this sequentially to do not DDOS my own server and since I can then show the user the progress of the operation.

So far I have:

        const pageSize = 20;
        this.service.Filter(null,null,null,1,pageSize).pipe(mergeMap(initalData => {
          const pageCount = initalData.pageInfo.pageCount;            
          let ids:string[] = initalData.payload.map(item => item.id);
          console.log('page',pageCount,1, initalData.pageInfo.page,ids);
          let ret = this.service.refresh(ids);
          for(let p=2;p<=pageCount;p++){
            console.log('refresh page', p);
            const pageResult = this.service.Filter(null,null,null,p,pageSize);
            pageResult.pipe(mergeMap(data => {
              let ids:string[] = data.payload.map(item => item.id);
              console.log('page', p, data.pageInfo.page,ids);
              const refreshResult = this.service.refresh(ids);
              return CombineLatest(ret, refreshResult);
            }));
          }                          
          return ret;
        })).subscribe(ret =>{
          console.log('final', ret);
        });

which only shows the log for the initial page and the final page also the refresh only happens on the first batch of items.

EDIT:

This gets the job done but it feels like not clean code since you have to sub to every page request:

this.service.Filter(null,null,null,1,pageSize).pipe(mergeMap(initalData => {
          const pageCount = initalData.pageInfo.pageCount;            
          const result:Observable<any>[] = [];
          for(let p=1;p<=pageCount;p++){

            console.log('page', p);
            this.service.Filter(null,null,null,p,pageSize).subscribe(data => {
              if(data && data.payload) {
                let ids:string[] = data.payload.map(item => item.id);
                console.log('page',data.pageInfo.page, ids);
                let pageResult = this.service.refresh(ids);
                pageResult.subscribe();
                result.push(pageResult);
              }
            });                
          }                          
          return combineLatest(result);
        })).subscribe(ret =>{
          console.log('final', ret);
        });

Answer 1

As I understood you, forkJoin RxJS operator may be helpful in your case. This operator combines results of multiple HTTP requests. You get a tupil value from forkJoin operator. Multiple requests are performed in parallel, but tupil value is only emitted when all of these observables are completed.

Useful links to read more about this topic:

https://www.learnrxjs.io/learn-rxjs/operators/combination/forkjoin

https://rxjs.dev/api/index/function/forkJoin