Angular 9中如何处理Observables并在多个方法中使用其返回结果

核心问题说明 #

你当前代码的核心问题是异步操作执行顺序不符合预期：

• userService.get() 和 labelService.get() 都是异步Observable请求，你在同步逻辑中直接使用还未返回结果的 userDetails、labels 变量会抛出未定义错误。
• 现有代码的执行顺序为：触发用户信息请求→触发标签请求→同步调用retrieveTableColumns，此时两个请求都还没拿到返回值，所有依赖接口返回结果的逻辑都会执行失败。

推荐解决方案 #

基于Angular 9配套的RxJS 6.x版本，使用原生RxJS操作符即可实现需求，不需要转Promise处理：

核心思路

1. 对于有依赖关系的请求，用switchMap操作符实现后置请求等待前置请求返回后再触发
2. 用shareReplay操作符缓存请求结果，避免多处调用时重复发起接口请求
3. 用forkJoin等待所有异步请求返回后，再执行依赖返回值的初始化逻辑

改造步骤

首先导入需要的RxJS依赖：

import { switchMap, shareReplay, takeUntil } from 'rxjs/operators';
import { forkJoin, Subject } from 'rxjs';

改造后的组件代码：

labels: KeyValuePair[];
userDetails: UserDetails;
displayedColumns: string[];
private destroy$ = new Subject<void>();
// 封装缓存请求的Observable，避免重复调用接口
private user$ = this.userService.get().pipe(shareReplay(1));
private labels$ = this.user$.pipe(
  // 等待用户信息返回后，拿到语言参数再发起标签请求
  switchMap(user => this.labelService.get(user.getLanguage())),
  shareReplay(1)
);

constructor(
   private labelService: LabelService, 
   private userService: UserService
){}

ngOnInit() {
  // 等待两个请求都完成后执行初始化逻辑
  forkJoin([this.user$, this.labels$])
    .pipe(takeUntil(this.destroy$))
    .subscribe(
      ([userData, labelsResponse]) => {
        this.userDetails = userData;
        this.labels = labelsResponse;
        // 所有依赖接口返回值的初始化逻辑都放在此处执行
        this.retrieveTableColumns();
        this.setColumns();
      },
      (error) => {
        this.errorMessage = error;
      }
    )
}

ngOnDestroy() {
  // 组件销毁时取消所有订阅，避免内存泄漏
  this.destroy$.next();
  this.destroy$.complete();
}

retrieveTableColumns() {
  this.displayedColumns = this.labels.filter(/* 自定义过滤逻辑 */);
}

executeMethods() { // 模板触发的方法
  // 触发时接口请求已完成，变量已赋值，可直接使用
  this.doSomethingWithUserDetails();
  this.doSomethingWithLabels();
}

doSomethingWithUserDetails() {
   // 自定义逻辑，可直接使用this.userDetails
   this.setColumns();
}

setColumns() { 
    if (this.userDetails.allowedForAction) {
        this.displayedColumns = this.columnsDef.concat(['action']);
        this.hiddenColumns.push(this.displayedColumns.length);
    } else {
        this.displayedColumns = this.columnsDef;
    }
}

doSomethingWithLabels() {
   // 自定义逻辑，可直接使用this.labels
}

关于toPromise的说明 #

不推荐使用toPromise转换的原因如下：

• Angular 9配套的RxJS版本中toPromise已经被标记为废弃，RxJS 7+版本已直接移除该方法，后续升级会出现兼容问题
• Observable天然支持流式数据处理、订阅取消、请求重试等能力，转成Promise会丢失这些特性，在Angular生态下属于典型的反模式，仅建议在对接第三方Promise场景时临时使用

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