Angular & RxJS：如何用合并流的分页值调用API接口

看起来你已经搞定了触发页码的各种流合并，接下来只需要把这些页码和你的API请求串联起来就行，我给你几个方案和优化建议：

基础方案：直接订阅并调用API #

你可以直接订阅pageToLoad$，每次收到新页码时调用loadPageOfEmpresas方法，然后处理返回的数据：

// 假设在组件的初始化钩子中（比如Angular的ngOnInit）
ngOnInit() {
  this.pageToLoad$.subscribe(pageNumber => {
    this.loadPageOfEmpresas(pageNumber)
      .subscribe({
        next: (response) => {
          // 这里处理返回的数据，比如追加到现有列表
          this.empresas = [...this.empresas, ...response.data];
          this.loadingMore = false;
        },
        error: (err) => {
          console.error('加载企业数据失败:', err);
          this.loadingMore = false;
        }
      });
  });
}

更优雅的方案：使用高阶映射操作符避免嵌套订阅 #

嵌套订阅不仅代码不够整洁，还可能带来内存泄漏或者并发请求的问题。推荐用RxJS的高阶操作符（比如switchMap或concatMap）来串联流：

import { switchMap } from 'rxjs/operators';

ngOnInit() {
  this.pageToLoad$
    .pipe(
      // switchMap会在新页码到来时取消之前未完成的请求，适合滚动场景（用户快速滚动时只处理最后一次请求）
      // 如果需要保证请求顺序，改用concatMap（前一个请求完成才处理下一个）
      switchMap(pageNumber => this.loadPageOfEmpresas(pageNumber))
    )
    .subscribe({
      next: (response) => {
        this.empresas = [...this.empresas, ...response.data];
        this.loadingMore = false;
      },
      error: (err) => {
        console.error('加载企业数据失败:', err);
        this.loadingMore = false;
      }
    });
}

额外优化：避免重复请求与内存泄漏 #

为了让你的分页逻辑更健壮，还可以加几个优化点：

1. 过滤已加载的页码：即使pageToLoad$用了distinct()，如果手动重复触发同一页码，还是可以通过状态判断过滤：

import { switchMap, filter } from 'rxjs/operators';

// 假设你有currentPage变量记录当前已加载的最大页码
this.pageToLoad$
  .pipe(
    filter(pageNumber => pageNumber > this.currentPage && !this.loadingMore),
    switchMap(pageNumber => this.loadPageOfEmpresas(pageNumber))
  )
  .subscribe(...);

2. 组件销毁时取消订阅：防止内存泄漏，记得在组件销毁钩子中清理订阅：

import { Subscription } from 'rxjs';

private pageSubscription: Subscription;

ngOnInit() {
  this.pageSubscription = this.pageToLoad$...subscribe(...);
}

ngOnDestroy() {
  this.pageSubscription?.unsubscribe();
}

这样你的分页流就能完美和API调用结合，实现滚动、窗口 resize、手动切换页码时的自动数据加载了！

内容的提问来源于stack exchange，提问作者Javier Torron Diaz