Angular中如何依次创建多订阅？及多订阅后执行公共操作的正确方式

嘿，作为Angular新手，能意识到嵌套订阅的问题已经超棒啦！这种“回调地狱”式的写法不仅可读性拉胯，还容易埋下内存泄漏的隐患。我们可以借助RxJS的操作符来优雅解决这个问题，分两种常见场景给你说明：

场景1：请求需要按顺序依次执行（比如后续请求依赖前序结果） #

如果你的三个请求必须按顺序完成（比如第二个请求需要用到第一个请求返回的数据），推荐用concatMap操作符——它会等待前一个Observable完成后，再订阅下一个Observable，完美实现你要的“依次执行”逻辑：

myfunction() {
  this.service1.function1().pipe(
    // 第一个请求完成后，执行第二个请求
    concatMap(data1 => {
      console.log("get this first");
      // 如果第二个请求需要data1，这里可以传入，比如this.service2.function2(data1)
      return this.service2.function2();
    }),
    // 第二个请求完成后，执行第三个请求
    concatMap(data2 => {
      console.log("get this second");
      return this.service3.function3();
    })
  ).subscribe({
    next: (data3) => {
      console.log("get this third");
      // 所有请求都完成了，执行公共操作
      this.dosomeoperations();
    },
    error: (err) => {
      // 别忘了处理错误，避免请求失败后无响应
      console.error('请求出错:', err);
    }
  });
}

场景2：请求之间互不依赖，只想等所有请求完成后执行操作 #

如果三个请求没有依赖关系，只是需要等所有数据都返回后再执行公共操作，用forkJoin更高效——它可以并行发起所有请求，等全部完成后一次性返回所有结果：

import { forkJoin } from 'rxjs';

myfunction() {
  forkJoin([
    this.service1.function1(),
    this.service2.function2(),
    this.service3.function3()
  ]).subscribe({
    next: ([data1, data2, data3]) => {
      console.log("get this first");
      console.log("get this second");
      console.log("get this third");
      // 所有数据都已获取，执行公共操作
      this.dosomeoperations();
    },
    error: (err) => {
      console.error('某个请求失败:', err);
    }
  });
}

额外提醒：避免内存泄漏 #

记得在组件销毁时取消订阅，防止内存泄漏。可以用takeUntil操作符配合一个销毁信号Subject：

import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

// 组件内定义销毁信号
private destroy$ = new Subject<void>();

// 组件销毁时发送信号
ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

myfunction() {
  this.service1.function1().pipe(
    concatMap(data1 => this.service2.function2()),
    concatMap(data2 => this.service3.function3()),
    takeUntil(this.destroy$) // 组件销毁时自动取消订阅
  ).subscribe(...);
}

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