Angular 12/rxjs：如何让独立fetchLists方法请求完成后执行后续逻辑

核心改造思路 #

只需要修改fetchLists方法让它返回Observable即可，所有列表拉取、赋值逻辑依然完全封装在方法内部，和后续业务逻辑完全解耦：

• 用forkJoin包裹三个并行请求，保证所有请求全部完成后才会抛出完成信号
• 用tap操作符在方法内部完成列表变量的赋值，外部不需要感知内部实现细节
• 方法直接返回封装好的Observable，外部调用时只需等待该Observable触发完成信号，即可执行后续业务逻辑

完整代码实现 #

第一步：改造fetchLists方法 #

import { forkJoin, tap, catchError, of } from 'rxjs';

// 所有列表拉取逻辑依然完全封装在该方法内，和业务逻辑完全隔离
fetchLists() {
  return forkJoin([
    this.httpHandlerCached.getListsA(),
    this.httpHandlerCached.getListsB(),
    this.httpHandlerCached.getListsC()
  ]).pipe(
    // 内部完成变量赋值，外部无需关心赋值逻辑
    tap(([listA, listB, listC]) => {
      this.listA = listA;
      this.listB = listB;
      this.listC = listC;
    }),
    // 可选：内部统一处理请求错误，外部无需感知异常处理逻辑
    catchError(err => {
      console.error('列表加载失败', err);
      // 根据业务需求处理失败场景，比如返回默认值、跳转等
      return of([]);
    })
  )
}

第二步：改造ngOnInit逻辑 #

配合rxjs操作符保证步骤1全部完成后才执行步骤2，同时优化原有嵌套订阅问题，避免内存泄漏：

import { Subject, switchMap, takeUntil, of } from 'rxjs';

export class YourComponent implements OnInit, OnDestroy {
  // 用于组件销毁时统一取消订阅，避免内存泄漏
  private destroy$ = new Subject<void>();

  ngOnInit(): void {
    // 步骤1：调用独立封装的拉取列表方法
    this.fetchLists().pipe(
      // 等列表全部加载完成后，切换到路由参数监听，执行步骤2
      switchMap(() => this.route.params),
      // 处理路由参数逻辑，打平订阅避免嵌套
      switchMap(params => {
        if (params['id']) {
          this.isNew = false;
          return this.httpHandler.getUser(params['id']);
        } else {
          this.isNew = true;
          return of(null);
        }
      }),
      // 组件销毁时自动取消所有订阅
      takeUntil(this.destroy$)
    ).subscribe(user => {
      if (user) {
        this.user = user;
      }
    })
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }

  // 上面改造后的fetchLists方法
  fetchLists() {
    // ... 省略fetchLists代码
  }
}

方案优势 #

• 完全满足列表拉取逻辑独立封装的要求，fetchLists内部逻辑和业务逻辑无任何耦合
• 保证所有列表请求全部完成后才会执行后续业务逻辑，不会出现数据未加载完成的问题
• 所有请求并行执行，和原有逻辑的请求效率一致，没有额外性能损耗
• 符合rxjs最佳实践，避免嵌套订阅和内存泄漏问题

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