如何在Angular中无重复代码实现双状态API调用并统计用户总数之和

嘿，我之前也碰到过类似的场景——多次调用同个API获取不同状态的数据，代码重复不说，还容易在加载状态和错误处理上出问题。用RxJS的forkJoin就能完美解决这个问题，既避免代码重复，还能并行发起请求提升效率，下面是具体的重构方案：

第一步：重构getCount函数，让它返回Observable #

原来的getCount直接在内部订阅了请求，导致无法组合多个请求。我们可以修改它，让它返回一个Observable，把订阅逻辑抽离到上层统一处理：

import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

// 重构后的getCount，返回Observable<number>
private getCount(status: string): Observable<number> {
  return this.dealService.getCount(
    this.accountId,
    this.transaction.id,
    status
  ).pipe(
    // 直接提取返回数据中的count值
    map(res => res.data),
    // 单独处理每个请求的错误，避免一个失败导致整个组合请求中断
    catchError(err => {
      this.notificationService.showError(err);
      return of(0); // 出错时返回0，保证总和计算能正常进行
    })
  );
}

第二步：用forkJoin并行发起请求并计算总和 #

forkJoin可以接收多个Observable数组，等所有请求都完成后，会返回一个包含每个请求结果的数组。我们用它来同时发起两个状态的请求，然后在订阅里计算总和：

import { forkJoin } from 'rxjs';
import { finalize } from 'rxjs/operators';

// 在组件的业务逻辑中调用
this.isLoading = true;
forkJoin([
  this.getCount('ForApproval'),
  this.getCount('Draft')
]).pipe(
  // 不管请求成功还是失败，最后都关闭加载状态
  finalize(() => this.isLoading = false)
).subscribe({
  next: ([forApprovalCount, draftCount]) => {
    // 两个结果相加得到总和
    this.total = forApprovalCount + draftCount;
  },
  complete: noop
});

方案优势 #

• 消除代码重复：所有请求的公共逻辑（比如API调用、错误处理）都集中在getCount里，上层只需要关注组合和计算逻辑
• 并行请求：两个API请求同时发起，比串行调用节省时间
• 统一加载状态：加载状态只需要设置一次，不会因为两次调用导致提前关闭加载动画
• 容错性强：单个请求失败时，通过catchError返回0，不会影响另一个请求的结果和总和计算（如果需要严格要求所有请求成功，可以移除catchError，在subscribe的error回调中统一处理）

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