Angular应用页面加载时如何分页拉取全量第三方API数据

核心逻辑说明 #

你需要循环调用分页接口直到返回数据量小于分页上限，无需自己手动管理嵌套订阅，直接使用RxJS内置的expand操作符处理递归请求即可，推荐把分页逻辑封装在服务层，组件侧几乎不需要调整原有逻辑。

第一步：调整PartyService服务代码 #

把分页、合并数据、缓存的逻辑全部封装在服务内部，对外依然保持无参的getAllParty方法，兼容原有调用方式：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of, expand, reduce, map, EMPTY } from 'rxjs';
import { IParty } from './你的IParty路径';

const PAGE_LIMIT = 1000; // 分页大小统一管理，后续修改更方便

@Injectable({
  providedIn: 'root'
})
export class PartyService {
  private parties: IParty[] | null = null;

  constructor(private http: HttpClient) {}

  // 对外暴露的方法保持无参，原有调用无需改参数
  getAllParty(): Observable<IParty[]> {
    // 已经有缓存直接返回
    if (this.parties) {
      return of(this.parties);
    }

    // 从第一页开始拉取
    return this.getSinglePage('').pipe(
      // 递归拉取下一页
      expand((currentPage) => {
        // 当前页返回数据小于分页上限，说明没有更多数据，终止请求
        if (currentPage.length < PAGE_LIMIT) {
          return EMPTY;
        }
        // 取当前页最后一条的code作为下一页的起始游标
        const lastCode = currentPage[currentPage.length - 1].code;
        return this.getSinglePage(lastCode);
      }),
      // 合并所有页的数据为全量数组
      reduce((allData, currentPage) => allData.concat(currentPage), [] as IParty[]),
      // 缓存全量数据，下次调用直接返回
      map(fullData => {
        this.parties = fullData;
        return fullData;
      })
    )
  }

  // 抽离单页请求为私有方法
  private getSinglePage(fromCode: string): Observable<IParty[]> {
    return this.http.get<IParty[]>(`${location}api/party?limit=${PAGE_LIMIT}&fromCode=${fromCode}`);
  }
}

第二步：组件层优化（非强制，推荐修改） #

原有组件的调用代码几乎不需要调整，只需要把初始化逻辑从构造函数移到Angular推荐的ngOnInit生命周期钩子，加上销毁时自动取消订阅的逻辑避免内存泄漏即可：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Subject, takeUntil, startWith, map } from 'rxjs';
import { IParty } from './你的IParty路径';
import { PartyService } from './你的服务路径';

@Component({
  selector: 'app-party-selector',
  templateUrl: './party-selector.component.html',
  styleUrls: ['./party-selector.component.css']
})
export class PartySelectorComponent implements OnInit, OnDestroy {
  parties: IParty[] = [];
  filteredParties?: Observable<IParty[]>;
  userInputParty = new FormControl('');
  lastFilter: string = '';
  selectedParties: IParty[] = [];
  // 销毁信号，用于自动取消订阅
  private destroy$ = new Subject<void>();

  constructor(private partyService: PartyService) {}

  ngOnInit(): void {
    this.partyService.getAllParty()
      .pipe(takeUntil(this.destroy$))
      .subscribe((parties: IParty[]) => {
        this.parties = parties;
        this.filteredParties = this.userInputParty.valueChanges.pipe(
          startWith<string | IParty[]>(''),
          map(value => typeof value === 'string' ? value : this.lastFilter),
          map(filter => this.filter(filter))
        );
      })
  }

  ngOnDestroy(): void {
    // 组件销毁时触发取消所有订阅
    this.destroy$.next();
    this.destroy$.complete();
  }

  // 原有其他方法：filter、displayFn、optionClicked、toggleSelection、clearSelection等保留即可
  private filter(filter: string): IParty[] {
    // 你的原有过滤逻辑
  }
  displayFn(party: IParty): string {
    // 你的原有展示逻辑
  }
  // 其他方法略
}

其他说明 #

• 你的HTML模板代码完全不需要修改，所有逻辑和现有写法兼容
• 如果接口能额外返回总条数字段，可以替代currentPage.length < PAGE_LIMIT的判断逻辑，容错性更高
• 如果后续其他组件也需要调用全量party数据，直接注入服务调用getAllParty即可，不需要重复写分页逻辑

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