angular - 一个订阅执行两个 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 秒一次。