一个订阅执行两个HTTP请求-Angular 4

Question

我实际上有以下代码：

ComputerValue: number;
private subscription: ISubscription;

ngOnInit() {
  this.getMyValue();
  setInterval(() => {
    this.getMyValue();
  }, 30000);
}


getMyValue(): void {
  this.subscription = this.dataService.getValueOfComputer().subscribe(data => {
    console.log(data);
    this.ComputerValue = data;
  });
}

当我检查控制台时，我有两次结果，因为我不知道为什么我的订阅执行两次HTTP查询。

有人有主意吗？

谢谢！

Answer 1

您使用的是setInterval而不是setTimeout。您的getMyValue方法将每30秒调用一次。

您还要两次拨打getMyValue。一次进入ngOnInit内部，一次进入ngOnInit的{​​{1}}

您的setInterval第一次在getMyValue内部被调用一次，然后每30秒调用一次。像这样更改您的实现：

ngOnInit

不确定为什么要这么做。

更新

您的情况看起来像是内存泄漏的完美示例。当我创建this Stackblitz for your reference时，这发生在我身上。

显然，为什么要获得两个（或在我的情况下为许多）控制台日志，是因为您可能没有取消订阅。

当我编译那个StackBlitz时，我想到了以后做。但是后来我注意到，由于我仍在编写要在控制台上显示的代码，因此以不同的文本将多个日志发送到控制台。

FIX

ComputerValue: number; private subscription: ISubscription; ngOnInit() { setInterval(() => { this.getMyValue(); }, 30000); } getMyValue(): void { this.subscription = this.dataService.getValueOfComputer().subscribe(data => { console.log(data); this.ComputerValue = data; }); } 从订阅开始。然后重新加载页面并检查其是否按预期工作。我自己做了，它开始为我工作。

unsubscribe

PS：：要复制方案，请注释掉ngOnDestroy() { this.subscription && this.subscription.unsubscribe(); } 方法，然后在保存每个更改的同时逐一更改日志的内容。您会看到多次记录到控制台，而这次不是每30秒一次。

Answer 2

已修复

我正在使用2个组件（AppComponent，ExampleComponent），其中ExampleComponent是上面的代码。

我在NgModule中添加了ExampleComponent（声明和Bootstrap数组）。

@NgModule({
    imports: [BrowserModule, HttpClientModule, BrowserAnimationsModule, FormsModule, ChartsModule],
    declarations: [AppComponent, ExampleComponent],
    bootstrap: [AppComponent, ExampleComponent],
    providers:[DataService]
})

当我从Bootstrap Array中删除ExampleComponent时，我的HTTP请求停止了重复。

如果有人对此有答案，请不要犹豫