【问题标题】：Angular2 Http.Post - How to view webapi responseAngular2 Http.Post - 如何查看 webapi 响应
【发布时间】：2017-09-06 12:30:39
【问题描述】：

我是 Angular2/Typescript 的新手，我正在编写我的第一个 Web 应用程序。

我正在尝试使用 POST 调用 webapi，它可以工作，如果我使用 FIDDLER 拦截调用，我可以看到 Json 响应。

现在，我如何在浏览器控制台中登录 json 输出？

代码是这样的：

代码调用

var s = this.myService.doSearch();
s.subscribe(
    data=> this.data = data,
    error => this.errorMessage = <any>error
);

console.log(s);

服务方式

doSearch() {
var url = this.baseUrl;

return this.http.get(url)
    .map(response => response.json())
    .catch(this.handleError);
}

我的问题是：如何以及在何处查看和管理 Json 输出？

谢谢

【问题讨论】：

How do I return the response from an Observable/http/async call in angular2?的可能重复

标签： json angular typescript asp.net-web-api http-post

【解决方案1】：

如果您在浏览器中调试或运行您的应用程序，您可以进行检查，然后移至“网络”选项卡。在此选项卡中选择您的 POST 请求，然后转到选项卡响应，瞧，您的 json 响应

编辑：

To log all response data do this:
return this.http.get(url)
    .map(res => res.json())
    .subscribe(data => { console.log(data);})
    .catch(this.handleError);
}

【讨论】：

感谢卢卡，这正是我正在做的，但我需要做的是使用 console.log 命令记录输出
啊，好吧，所以您想将从服务器获得的 json 响应打印到控制台中？
是的，这正是我所需要的
编辑了我的问题

【解决方案2】：

你需要在异步代码完成后console.log它：

var s = this.myService.doSearch();
s.subscribe(
    data=> {
          this.data = data;
          console.log(data);
    },
    error => this.errorMessage = <any>error
);

【讨论】：

【解决方案3】：

试试这个，这将打印你返回的 observable 中的内容。

var s = this.myService.doSearch();
s.subscribe(data=> {
       this.data = data;
       console.log(data);
       },
       error => this.errorMessage = <any>error
);

永远记住如果你想从 observable 获取数据。你需要订阅它。

你不能像console.log(s); 这样记录它，因为 s 返回一个 observable。您应该订阅并在 subscribe 中引用这些数据。

【讨论】：