RxJS 5迁移至6遇问题：switchMap与Interval无法正常使用

我太懂这种升级时被破坏性变更打个措手不及的感觉了——RxJS 6的操作符重构确实是个大坎，尤其是原来的链式调用和静态方法都变了样。咱们一步步来解决你的问题：

问题根源拆解 #

你的两个问题其实都是RxJS 6核心变更导致的：

1. Observable不再自带.interval静态方法：RxJS 6把所有像interval、of、from这类创建型的静态方法，从Observable类上剥离成了独立函数，必须单独导入才能使用。
2. 不能直接链式调用.switchMap：RxJS 6废弃了实例操作符的链式调用，所有像switchMap、map、filter这类操作符，都需要通过pipe()方法来串联使用。

修复后的完整代码 #

先把需要的依赖导入，然后修改你的 polling 逻辑：

import { Observable, interval } from 'rxjs';
import { switchMap } from 'rxjs/operators';

// 你的组件或服务类代码
export class YourComponent {
  // ... 其他属性和方法 ...

  startPolling() {
    let polling = interval(2000)
      .pipe(
        switchMap(() => this.http.get(this.videoStatusURL + this.taskID))
      )
      .subscribe(
        (data) => {
          if (data["state"] === "SUCCESS") {
            console.log("polling succeeded");
            this.downloadFinalVideo();
            polling.unsubscribe(); // 手动取消订阅
          }
        },
        error => this.handleError(error)
      );
  }

  // ... 其他方法（比如handleError、downloadFinalVideo） ...
}

关键变更点解释 #

• 导入方式变化：现在要分别导入创建函数（interval）和操作符（switchMap），而不是以前只导入Observable就能用所有静态方法。
• 用pipe包裹操作符：所有实例操作符都要放进pipe()里，这是RxJS 6的标准写法，不仅统一了API，还能更好地支持树摇优化，减少打包体积。

额外优化建议（可选） #

手动调用unsubscribe虽然可行，但在Angular组件里，更推荐用takeUntil操作符来自动管理订阅，避免内存泄漏：

import { Observable, interval, Subject } from 'rxjs';
import { switchMap, takeUntil } from 'rxjs/operators';

export class YourComponent implements OnDestroy {
  private destroy$ = new Subject<void>(); // 用于触发订阅销毁

  startPolling() {
    interval(2000)
      .pipe(
        switchMap(() => this.http.get(this.videoStatusURL + this.taskID)),
        takeUntil(this.destroy$) // 组件销毁时自动取消订阅
      )
      .subscribe(
        (data) => {
          if (data["state"] === "SUCCESS") {
            console.log("polling succeeded");
            this.downloadFinalVideo();
          }
        },
        error => this.handleError(error)
      );
  }

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

这样就不用手动保存polling变量来取消订阅了，组件销毁时会自动清理所有关联的订阅，更符合Angular的最佳实践。

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