为何订阅的interval中接口未按每5秒预期触发？

问题代码 #

constructor( myService: MyService, @Inject(APP_DEPLOY_URL) public appDeployUrl: string) {
  this.myService = myService;
  var a = 1

  this.subscription = interval(5000).subscribe(() => {
    this.name$ = this.myService.GetName$({});

    console.log(a + "==============")
    this.language$ = this.myService.GetLanguage$({});

    console.log("ccc")

    this.address$ = this.myService.GetAddress$({});
    console.log("aaaa")

    this.age$ = this.myService.GetAge$({});
    console.log("ddd")
    a+=1
  })
}

问题现象 #

控制台中interval内的日志能按时输出，但网络面板看不到接口请求；但通过按钮点击事件调用其中一个接口时，请求能正常触发并在网络面板中显示。

原因分析 #

Angular的HttpClient返回的是冷Observable，这类Observable的特性是：只有当存在有效的订阅（调用.subscribe()方法）时，才会执行内部逻辑并发送HTTP请求。你当前只是把Observable实例赋值给组件属性，没有对这些Observable进行订阅，所以请求不会被触发。而按钮点击时的调用逻辑应该包含了订阅操作，因此能正常发起请求。

解决方案 #

方案1：直接在interval内订阅每个Observable

如果不需要在模板中绑定这些数据，可直接在interval的回调里对每个接口Observable进行订阅：

this.subscription = interval(5000).subscribe(() => {
  // 订阅Name接口
  this.myService.GetName$({}).subscribe(name => {
    this.name = name; // 按需处理返回数据
  });
  // 订阅Language接口
  this.myService.GetLanguage$({}).subscribe(language => {
    this.language = language;
  });
  // 其他接口同理
  console.log(a + "==============")
  console.log("ccc")
  console.log("aaaa")
  console.log("ddd")
  a+=1
})

注意：这种方式会创建多个独立订阅，务必在组件销毁时取消所有订阅，避免内存泄漏。

方案2：使用async管道（推荐，适用于模板绑定场景）

如果这些Observable是用来在模板中展示数据的，直接在模板中使用async管道，它会自动帮你完成订阅和取消订阅：

<!-- 模板中对应位置添加 -->
<div>{{ name$ | async }}</div>
<div>{{ language$ | async }}</div>
<div>{{ address$ | async }}</div>
<div>{{ age$ | async }}</div>

这样你在interval中赋值this.name$ = this.myService.GetName$({})时，async管道会自动订阅该Observable，触发HTTP请求。

方案3：合并Observable（适用于需批量处理请求场景）

如果需要等待所有接口请求完成后统一处理数据，可使用forkJoin合并多个Observable，再一次性订阅：

import { forkJoin } from 'rxjs';

// ...

this.subscription = interval(5000).subscribe(() => {
  forkJoin([
    this.myService.GetName$({}),
    this.myService.GetLanguage$({}),
    this.myService.GetAddress$({}),
    this.myService.GetAge$({})
  ]).subscribe(([name, language, address, age]) => {
    this.name = name;
    this.language = language;
    this.address = address;
    this.age = age;
    // 统一处理返回数据
  });
  console.log(a + "==============")
  console.log("ccc")
  console.log("aaaa")
  console.log("ddd")
  a+=1
})

内存泄漏防范 #

无论使用哪种方案，都要在组件销毁时取消interval的订阅：

ngOnDestroy() {
  this.subscription?.unsubscribe();
}

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