Angular RxJS实现加载更多：合并HTTP请求结果问题求助

你的getProductsV3实现存在几个关键问题，导致无法正常合并新旧数据：

• scan操作符缺少初始值：第一次触发时prev为undefined，尝试展开prev.product会直接抛出错误，必须指定合法的初始值来处理首次请求的合并逻辑。
• API字段与代码引用不匹配：你给出的API返回结构是{requestInfo: Info, product: Product[]}，但代码里错误使用了infos、products这类不存在的字段名。
• combineLatest的潜在冗余：如果limit$是固定值（比如固定每页条数），用withLatestFrom替代combineLatest更合理，避免limit意外变化时触发不必要的请求。

修正后的代码实现 #

public getProductsV3(): Observable<ProductResponseApi> {
  // 若limit为固定值，建议替换为withLatestFrom(this.limit$)
  const request$ = combineLatest([this.offset$, this.limit$]).pipe(
    switchMap(([offset, limit]) => this.fetchProductsFromApiV2(offset, limit))
  );

  return request$.pipe(
    // 指定初始值，确保首次合并逻辑合法
    scan((prev, current) => ({
      requestInfo: current.requestInfo, // 严格对应API返回的字段名
      product: [...prev.product, ...current.product] // 合并新旧产品列表
    }), {
      requestInfo: {} as Info,
      product: [] as Product[]
    })
  );
}

关键修改说明 #

1. 初始值设置：首次请求时，prev会使用我们定义的初始对象，...prev.product即为空数组，既不会报错，也能正确合并首次请求的产品数据。
2. 字段名修正：严格对齐API返回的requestInfo和product字段，避免因字段不匹配导致数据丢失。
3. 可选优化：如果limit$是静态值（比如固定每页10条），可以将combineLatest([this.offset$, this.limit$])替换为this.offset$.pipe(withLatestFrom(this.limit$))，这样只有offset变化时才会触发API请求，减少冗余调用。

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