HttpClient返回一次json然后返回undefined答案

【问题标题】：HttpClient returns json once and then returns undefinedHttpClient返回一次json然后返回undefined
【发布时间】：2019-07-17 16:03:50
【问题描述】：

我正在使用HttpClient 从服务器读取 JSON 的内容。我可以成功读取一次内容，但是当我第二次读取时，它总是返回undefined。

这就是我的.ts 的样子：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  constructor(private httpService: HttpClient) { }

  getData() {
    this.httpService.get('https://raw.githubusercontent.com/LearnWebCode/json-example/master/animals-1.json').subscribe(
          result => { 
            console.log(result)
          }
    )
  }

   ngOnInit() {
     this.getData()
     setInterval(this.getData, 10000)
   }
}

HttpClient 在我第一次读取 JSON 时正确导入到 app.module.ts，它可以正常工作。

这里是stackBlitz 的问题。

我正在使用setInterval，因为我希望能够在值更新时继续读取 JSON。我是否打算关闭 httpClient.get 请求，以便我可以再做一个。

我看到其他问题，请求总是返回 undefined，但我的只在第二次请求时和之后返回 undefined。

每次发送get请求如何成功获取JSON的内容？

编辑显然对于某些我的 stackblitz 工作没有问题，这里是来自控制台的 stackblitz 的屏幕截图：

【问题讨论】：

Why is setInterval in an Angular service only firing one time?的可能重复
@Dino 不是重复的，因为setinterval 正在正确触发。请在标记之前查看链接的 StackBlitz。
您的 stackblitz 工作正常，是的，这是重复的。您得到的答案与我引用的那篇文章中的答案相同。请再检查一遍

标签： json angular angular-httpclient

【解决方案1】：

提供给 setInterval 的函数中的

this 在调用时并不指向该类。

改用箭头函数。

    setInterval(() => { this.getData(); }, 10000);

【讨论】：

在 stackblitz 中刷新预览页面后我不再收到错误消息。即使更改了代码，该进程似乎仍在后台运行。

【解决方案2】：

你用过this.getData，应该是this.getData() 你必须使用箭头函数。

试试这个：

setInterval(() => this.getData(), 10000);

【讨论】：

我偶尔还是会收到：Cannot read property 'get' of undefined。为什么会这样？我增加了间隔，仍然得到这个？

【解决方案3】：

使用箭头函数是一个很好的响应，但在使用setInterval 时应该小心。您绝对应该更喜欢在 Angular 应用程序上下文中使用 RxJS：

interval(10000).pipe(
   mergeMap(() => this.getData())
).subscribe()

setInterval 的不良做法使用：https://dev.to/akanksha_9560/why-not-to-use-setinterval--2na9

【讨论】：