RxJS：如何获取mergeMap等操作符合并后的Observable订阅？

嘿，这个场景我太熟了！你其实不用费劲去抓合并后的Observable订阅，RxJS有好几种优雅的方式帮你实现加载状态的控制，刚好适配你用exhaustMap做分页的需求～

方案一：用finalize快速控制加载状态 #

这是最简洁的方案，直接在exhaustMap内部处理每个请求的加载状态：

// 先定义一个加载状态变量，比如在组件里
isLoading = false;

this._nextPage$.pipe(
  exhaustMap(nextPageNumber => {
    // 发起请求前立即标记为加载中
    this.isLoading = true;
    return this.getPage(nextPageNumber).pipe(
      // 关键：不管请求成功/失败，最终都会执行这个回调，重置加载状态
      finalize(() => this.isLoading = false)
    );
  })
).subscribe(pageData => {
  // 处理返回的页面数据
  this.currentPageData = pageData;
});

为什么好用？ finalize操作符会在Observable完成或出错时触发，完全不用担心请求失败后加载动画一直转的问题，而且代码量极少。

方案二：用状态流实现响应式绑定（推荐） #

如果你的项目用了Angular的async管道，或者更倾向于响应式状态管理，可以把加载状态和数据包装成一个状态流，这样能直接绑定到模板，不用手动管理变量：

// 创建一个包含加载状态和数据的Observable
const pageState$ = this._nextPage$.pipe(
  exhaustMap(nextPageNumber => 
    // 按顺序发射：加载中状态 → 请求数据 → 加载结束状态
    concat(
      of({ isLoading: true, data: null, error: null }),
      this.getPage(nextPageNumber).pipe(
        map(data => ({ isLoading: false, data, error: null }))
      )
    ).pipe(
      // 捕获请求错误，避免整个流被中断
      catchError(err => {
        console.error('分页请求失败:', err);
        return of({ isLoading: false, data: null, error: err });
      })
    )
  )
);

// 订阅状态流，或者直接在模板里用async管道
pageState$.subscribe(state => {
  this.isLoading = state.isLoading;
  if (state.data) {
    this.currentPageData = state.data;
  }
  if (state.error) {
    // 处理错误提示
  }
});

你也可以用startWith简化上面的concat写法：

// 简化版
const pageState$ = this._nextPage$.pipe(
  exhaustMap(nextPageNumber => 
    this.getPage(nextPageNumber).pipe(
      map(data => ({ isLoading: false, data, error: null })),
      startWith({ isLoading: true, data: null, error: null }),
      catchError(err => of({ isLoading: false, data: null, error: err }))
    )
  )
);

这种方式的好处是状态完全由流驱动，不会出现手动修改变量导致的不一致问题，特别适合复杂的分页场景（比如加载更多、数据累积）。

方案三：如果非要获取合并后的订阅（不推荐） #

如果你确实需要拿到请求Observable的订阅对象，可以在exhaustMap内部保存，但这种方式需要手动管理订阅清理，容易引发内存泄漏，所以只做参考：

let currentRequestSub: Subscription | null = null;

this._nextPage$.pipe(
  exhaustMap(nextPageNumber => {
    const request$ = this.getPage(nextPageNumber);
    // 保存当前请求的订阅
    currentRequestSub = request$.subscribe();
    return request$.pipe(
      // 请求完成后清空订阅引用
      finalize(() => currentRequestSub = null)
    );
  })
).subscribe();

// 通过判断订阅是否存在来控制加载状态
this.isLoading = !!currentRequestSub;

注意：这种方式一定要确保在组件销毁时取消所有订阅，否则会有内存泄漏风险。

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