Angular 11：如何优化条件式HTTP请求的高阶映射代码？

AI 小北

2026-8-2

优化后的实现方案

可以通过提取重复逻辑和利用RxJS的响应式特性来简化代码，消除冗余的分支判断：

步骤1：提取重复的请求逻辑

把两个分支中相同的获取worksheet的逻辑抽成独立函数，避免代码重复：

private getWorksheetByProjectGuid(projectGuid: string): Observable<Worksheet | number> {
  const getUrl = `projects/${projectGuid}/questionnaires/${this.questionnaireId}/worksheets/latest`;
  return this.apiService.get<Worksheet>(getUrl).pipe(
    catchError((err) => of(err.status))
  );
}

步骤2：重构主函数，用RxJS流处理条件

通过of将同步值转为Observable，结合switchMap统一处理两种场景：

getWorksheet(): Observable<Worksheet | number> {
  // 根据projectsGuid是否为空，生成对应的Observable流
  const projectGuid$ = this.projectsGuid === '' 
    ? this.apiService.get<{id: string, name: string}>('projects/latest').pipe(
        tap(res => this.projectsGuid = res.id), // 获取到最新项目ID后更新本地变量
        map(res => res.id)
      )
    : of(this.projectsGuid);

  // 统一发起worksheet请求
  return projectGuid$.pipe(
    switchMap(projectGuid => this.getWorksheetByProjectGuid(projectGuid))
  );
}