RxJS中pipe调用expand操作符替换值而非累加的问题如何解决

问题原因 #

expand操作符仅会依次发射每次分页请求返回的单页数据，本身不具备数据聚合能力，所以你当前订阅到的永远是最新一页的返回值，才会出现覆盖原有数据的问题。

修复代码 #

import { empty } from 'rxjs';
import { expand, scan } from 'rxjs/operators';

templates$: Observable<Template[]>;

this.templates$ = this.templateService.getTemplates(0, 5).pipe(
  expand((result, index) => {
    const nextOffset = (index + 1) * 5;
    return result.length === 5 ? this.templateService.getTemplates(nextOffset, 5) : empty();
  }),
  // 累加每一页数据到全量数组中
  scan((totalTemplates, currentPage) => [...totalTemplates, ...currentPage], [])
);

说明 #

• 移除了外部的count变量，改用expand回调自带的index参数计算下一页偏移量，避免全局状态污染，更符合响应式编程规范
• scan操作符会维护累加器，每次拉到新的分页数据时，就把当前页数据合并到全量数组中，每拉取到一页就会向下游发射一次最新的全量数据，适合需要逐步渲染新增内容的场景
• 如果需要等到所有分页全部拉取完成后才一次性返回全量数据，可以在scan后追加last()操作符即可。

内容的提问来源于stack exchange，提问作者Gixen