Angular RxJS重构：滚动加载时合并新Observable数据至现有Observable

问题分析 #

你的现有代码存在两个核心问题：一是在tap里嵌套subscribe，容易引发订阅泄漏且不符合RxJS的数据流范式；二是直接修改数组的引用（push），破坏了数据流的纯净性。下面是基于RxJS操作符的优化方案。

重构方案 #

1. 改用Subject管理滚动触发事件 #

首先，把滚动触发转化为Observable流，避免每次调用onScroll时重新赋值list$：

private scrollTrigger$ = new Subject<void>();
private pageIndex = 1; // 初始页码设为1

2. 构建纯净的列表数据流 #

用scan累积分页数据，switchMap/concatMap处理分页请求，统一所有数据加载逻辑：

list$ = this.scrollTrigger$.pipe(
  // 用concatMap保证分页请求按顺序返回，适合依赖页码的场景；若需取消未完成请求可换用switchMap
  concatMap(() => this.notificationService.getNotificationListForUser(`?PageIndex=${++this.pageIndex}`)),
  // 累积数据，每次创建新数组而非修改原数组，保持数据流纯净
  scan((accumulatedList, newItems) => [...accumulatedList, ...newItems], []),
  // 初始化加载第一页数据
  startWith(() => this.notificationService.getNotificationListForUser('?PageIndex=1').pipe(
    catchError(() => of([])) // 处理初始加载失败的情况
  )),
  // 解析初始加载的数据流
  switchMap(initialLoad$ => initialLoad$),
  // 全局捕获错误，避免单个请求失败中断整个数据流
  catchError(() => of([]))
);

3. 简化onScroll方法 #

现在onScroll只需要触发滚动事件流即可：

onScroll() {
  this.scrollTrigger$.next();
}

关键优化点 #

• 消除嵌套订阅：用concatMap/switchMap替代嵌套的subscribe，符合RxJS链式调用的最佳实践。
• Immutable数据处理：通过[...accumulatedList, ...newItems]创建新数组，避免直接修改原数组，确保数据流的可预测性。
• 统一逻辑入口：所有分页加载逻辑都集中在list$的管道中，代码结构更清晰，便于维护和调试。
• 容错性提升：添加多层catchError，确保单个请求失败不会导致整个数据流中断。

可选优化：滚动防抖 #

如果滚动触发过于频繁，可添加debounceTime减少无效请求：

list$ = this.scrollTrigger$.pipe(
  debounceTime(300), // 300ms内仅触发一次请求
  concatMap(() => this.notificationService.getNotificationListForUser(`?PageIndex=${++this.pageIndex}`)),
  scan((accumulatedList, newItems) => [...accumulatedList, ...newItems], []),
  startWith(() => this.notificationService.getNotificationListForUser('?PageIndex=1').pipe(catchError(() => of([])))),
  switchMap(initialLoad$ => initialLoad$),
  catchError(() => of([]))
);

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