Question

我是Angular2的新手，不知怎的，我很难理解Angular2中的http是如何工作的。我创建了一个应该显示json响应的简单组件。它不起作用，我不明白为什么。我检查了许多教程，并尝试使用promises和observables。不行。我无法获得响应的数据。

我的代码：

  private doAction() {
    this.doHttpRequest().subscribe(
      data => this.content = data
    );
    this.content = JSON.stringify(this.content);
  }

  private doHttpRequest() {
    return this.http.get('http://jsonplaceholder.typicode.com/posts/1')
                    .catch(this.handleError);
  }

this.content绑定到我的模板。当我单击按钮启动doAction（）一秒钟时，我在模板中看到“”，再过一秒[object object]

这里有什么问题？

Answer 1

这是预期的行为

  private doAction() {
    // schedule HTTP call to server and subscribe to get notified when data arrives
    this.doHttpRequest().subscribe(
      // gets called by the observable when the response from the server aarives
      data => this.content = data
    );
    // execute immediately before the call to the server was even sent
    this.content = JSON.stringify(this.content);
  }

要修复它，请将其更改为

  private doAction() {
    this.doHttpRequest().subscribe(
      data => {
        //this.content = data;
        this.content = data.json());
      });
    );
  }

如果您希望在数据到达后执行代码，则需要在subscribe(...)回调中移动它。

Answer 2

由于http请求是异步的，您必须根据subscribe()回调中的http调用结果放置所有逻辑，如下所示：

private doAction() {
  this.doHttpRequest().subscribe(
    data => {
      this.content = data;
      // any more logic must sit in here
    }
  );
}

private doHttpRequest() {
  return this.http.get('http://jsonplaceholder.typicode.com/posts/1')
                .map(res => res.json());
                .catch(this.handleError);
}

Answer 3

Http调用返回数据，因为它在模板中显示“[object Object]”。如果要在模板中查看json数据，可以使用json管道，如下所示。

PS：不需要“this.content = JSON.stringify（this.content）;”在你的代码中。

通过http：空响应接收JSON数据

3 个答案: