Angular组件快速销毁时rxjs timer无法取消订阅导致重复API调用问题

根因说明 #

你推测的「timer未返回订阅对象」场景实际不存在：调用subscribe()方法会同步返回订阅实例，不需要等待timer的首次延迟结束。该问题的本质是手动管理单订阅变量的方式存在鲁棒性缺陷，更稳妥的方案是使用RxJS的takeUntil操作符配合销毁通知流实现全生命周期的订阅自动终止。

修复后代码 #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Observable, Subject, timer } from 'rxjs';
import { takeUntil, switchMap } from 'rxjs/operators';
// 注意你原来的rxjs/Rx是旧版本导入方式，新版RxJS建议直接从rxjs导入核心对象

@Component({
    templateUrl: 'app/pages/CurrentRuns/currentruns.component.html'
})
export class CurrentRunsComponent implements OnInit, OnDestroy {
    // 销毁通知流
    private destroy$ = new Subject<void>();

    ngOnInit() {
        timer(firstcheckVal, 2500)
          .pipe(
            // 监听销毁通知，收到通知后立刻终止整个流，不管timer是否已经触发
            takeUntil(this.destroy$),
            switchMap(() => this.testService.getTestdata())
          )
          .subscribe(data => {
             // 业务逻辑
          })
    }

    ngOnDestroy(){
        console.log("Destroy timer");
        // 发送销毁通知并终止通知流
        this.destroy$.next();
        this.destroy$.complete();
    }
}

方案优势 #

• 无需手动管理订阅实例，哪怕组件在timer的首次等待阶段销毁，takeUntil会立刻终止整个timer流，不会触发后续的API调用
• 支持同时管理多个订阅，所有需要随组件销毁终止的流都可以复用同一个destroy$，只需要加takeUntil(this.destroy$)操作符即可
• 完全覆盖所有销毁场景，不存在遗漏取消订阅的风险

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