使用一个订阅执行的两个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;
  });
}

不知道为什么你这样做.

UPDATE

您的场景看起来像是内存泄漏的完美示例.当我创建这个Stackblitz供你参考时,这发生在我身上.

显然,为什么你获得两个(或在我的情况,MANY)控制台日志是因为你可能已经从认购不退订.

我想在以后编译StackBlitz时这样做.但后来我注意到有多个日志到控制台有不同的文本,因为我还在编写要在控制台上显示的代码.

固定

unsubscribe从订阅开始.然后重新加载页面并检查它是否按预期工作.我自己做了,它开始为我工作.

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

PS:要复制方案,请注释掉ngOnDestroy方法,然后在保存每个更改的同时逐个更改日志的内容.您将看到多个日志到控制台,这次,而不是每30秒.