RxJs 扩展方法导致额外的 HTTP 调用答案

【问题标题】：RxJs expand method causing extra HTTP callRxJs 扩展方法导致额外的 HTTP 调用
【发布时间】：2021-01-31 14:20:06
【问题描述】：

我使用以下方法发送多个 HTTP 调用：

listEmployees() {
  of({
    hasNext: true,
    pageIndex: 0,
    items: []
  }).pipe(
    expand(data => this.employeeService.list(data.pageIndex+1, 100) //100 records for each call
    .pipe(
      map(newData => ({...newData, pageIndex: data.pageIndex+1}))
    )),
    takeWhile(data => (data.hasNext|| data.pageIndex === 1)),
    map(data => data.items),
    reduce((acc, items) => ([...acc, ...items]))
  )
  .subscribe(result => {
    this.employees = result;
  });    
}

但是，由于调用是在第一步中进行的，takeWhile 仅在下一次 HTTP 调用完成后才会执行。但我需要检查 HTTP 响应的 hasNext 变量，然后决定发送下一个 HTTP 调用。为此，我尝试制作类似的东西，但由于 pageIndex 未更改或某些原因等原因，它不起作用。

listEmployees() {
  this.employeeService.list(data.pageIndex+1, 100).pipe(  //100 records for each call
    expand((data) => {
        if(data.hasNext) {
          return this.employeeService.list(data.pageIndex+1, 100);                
        } else {
          return of(EMPTY);
        }
    })
    .subscribe(result => {
        this.employees = result;
    });    
}

我该如何解决这个问题？我认为我应该通过修改第一种方法来使用第二种方法，以便在检查条件后发送后续调用。任何帮助将不胜感激。

【问题讨论】：

标签： javascript angular http rxjs

【解决方案1】：

也许在你的 takeWile 上设置包容性标志

listEmployees() {
  of({
    hasNext: true,
    pageIndex: 0,
    items: []
  }).pipe(
    expand(data => 
      this.employeeService.list(data.pageIndex+1, 100).pipe(
        map(newData => ({...newData, pageIndex: data.pageIndex+1}))
      )
    ),
    takeWhile(data => data.hasNext, true), // Inclusive = true
    map(data => data.items),
    reduce((acc, items) => ([...acc, ...items]))
  )
  .subscribe(result => {
    this.employees = result;
  });    
}

【讨论】：