一个订阅执行两个 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 的 setInterval

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

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;
  });
}

虽然不确定你为什么要这样做。

更新

您的场景看起来像是内存泄漏的完美示例。这在我创建 this Stackblitz for your reference.

时发生在我身上

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

我后来在编译 StackBlitz 时想到了这样做。但后来我注意到控制台收到多个日志，其中包含不同的文本，因为我仍在编写要在控制台上显示的代码。

修复

unsubscribe 首先来自订阅。然后重新加载页面并检查它是否按预期工作。我自己做了，它开始为我工作。

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

PS: 要复制您的场景，请注释掉 ngOnDestroy 方法，然后在保存每个更改的同时逐一更改日志内容.您会在控制台看到多个日志，这次不是每 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 数组中删除 ExampleComponent 时，我的 HTTP 请求停止重复。

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

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

two HTTP request executed with one subscribe - Angular 4

http

subscribe

typescript

angular

更新

修复