RxJS Observable超时后事件为何触发两次？

嘿，我完全懂你的困惑！这种情况我刚学RxJS的时候也踩过坑，大概率是你的Observable被订阅了两次，而非超时操作符本身导致的重复输出。我来给你拆解常见场景和解决办法：

1. 最常见的原因：冷Observable被多次订阅 #

RxJS的普通Observable（非BehaviorSubject这类多播Observable）是“冷”的——每一次订阅都会重新执行Observable内部的逻辑。举个贴近你场景的代码示例：

import { Observable, timeout } from 'rxjs';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<p>{{ myObs$ | async }}</p>`
})
export class AppComponent implements OnInit {
  myObs$: Observable<string>;

  ngOnInit() {
    // 创建冷Observable，每次订阅都会触发next('Hello!')
    this.myObs$ = new Observable(subscriber => {
      console.log('Observable内部逻辑执行了');
      subscriber.next('Hello!');
      // 未调用complete()，1秒后触发超时
    }).pipe(timeout(1000));

    // 手动订阅一次
    this.myObs$.subscribe(val => console.log(val));
  }
}

这里的问题很明显：

• Angular的async管道会自动订阅一次myObs$
• 你又在ngOnInit里手动调用了subscribe()
• 两次订阅都会触发Observable内部的subscriber.next('Hello!')，所以“Hello!”会被打印两次
• 1秒后因为Observable未完成，超时错误会触发，但此时“Hello!”已经输出两次了

2. 如何验证是否是多次订阅？ #

你可以在Observable的内部逻辑里加一句调试打印，比如console.log('Observable内部逻辑执行了')。如果这句话输出两次，那百分百是订阅次数过多导致的。

3. 解决办法：把冷Observable转成多播的 #

如果你希望多个订阅者共享同一次Observable的执行逻辑，用share()操作符（或shareReplay()，按需选择）就能搞定：

import { Observable, timeout, share } from 'rxjs';

// ...其他代码不变
this.myObs$ = new Observable(subscriber => {
  console.log('Observable内部逻辑执行了');
  subscriber.next('Hello!');
}).pipe(
  timeout(1000),
  share() // 所有订阅者共享一次执行逻辑
);

这样不管是async管道还是手动订阅，Observable内部的逻辑只会执行一次，“Hello!”也只会打印一次。

4. 另一种可能：重复创建并订阅Observable #

如果你的代码在循环、多次触发的方法（比如ngOnChanges或点击事件）里创建并订阅Observable，也会导致重复输出。这种情况要检查代码逻辑，确保Observable只创建和订阅一次（比如放在ngOnInit里，而非频繁触发的钩子或事件中）。

总结一下：超时本身不会导致“Hello!”重复输出，核心问题是同一个冷Observable被订阅了多次，每次订阅都会重新触发next('Hello!')。用share()这类多播操作符就能轻松解决这个问题啦～

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