Angular 6 http.get - 在控制台中显示返回的对象

Question

这里有一个有用的 Angular 教程：

https://coursetro.com/posts/code/154/Angular-6-Tutorial---Learn-Angular-6-in-this-Crash-Course

在 data.services.ts 文件中有一个简单的 http.get，它返回一个 json 有效负载：

return this.http.get('https://jsonplaceholder.typicode.com/users');

我希望在 Chrome 开发人员工具中“检查”有效负载并添加以下代码：

console.log("Payload = " + this.http.get('https://jsonplaceholder.typicode.com/users'));

但我在 Chrome 中看到的是这样的：

Payload = [object Object]

如何“查看”通过 console.log() 返回的原始 JSON 数据？

我想检查有效负载的原因是我的要求是读取 XML 响应。我知道我必须将 XML 转换为 JSON，但我想确保我得到了 XML。

Answer 1

http 的 get 方法返回一个 observable。一个 observable 只有在它被订阅后才能工作。

this.http.get('some url ') // No api call will be made. You haven't subscribe it yet. You can check your browser network tab.

所以写成这样：

console.log('Print:' + this.http.get('')); // will get 'Print: + [object object] because this is not the data that has returned but an observable object.'

要实际获取数据，请订阅 observable，如下所示： 试试这个：

this.http.get('some url ').subscribe(responseData => console.log(responseData));

Answer 2

另一种方法是通过设置响应选项来获得完整响应。这也可以用于从响应中读取标头。

  this.http.get('https://jsonplaceholder.typicode.com/users',{ observe: 'response' })
   .subscribe(
    response => console.log(response.body)
  );

Angular.io Guide - Reading the full response

Answer 3

确保您只是注销有效负载，而不是将其与字符串 ("Payload = ...") 连接。

这样做会将 http.get 方法的输出变成它的 toString() 解释，[object Object]：

console.log("Payload = " + this.http.get('https://jsonplaceholder.typicode.com/users'));

改为这样做：

数据服务

someMethod() {
    return this.http.get('https://jsonplaceholder.typicode.com/users');
}

使用服务

someOtherMethod() {
    this.dataService.someMethod().subscribe(payload => console.log(payload));
}

---

您可以执行以下操作以在您的服务中进行快速测试（但请记住，不会返回任何值）：

someMethod() {
    this.http
        .get('https://jsonplaceholder.typicode.com/users')
        .subscribe(payload => console.log(payload));
}

Answer 4

好吧，我是 Angular 6 的新手，但是由于 http.client 返回一个 Observable，我们必须订阅它才能获得结果，并将值输出到控制台而不是 [Object object] 你必须将它传递给console.log() 作为参数：

this.http.get('https://jsonplaceholder.typicode.com/users').subscribe(
  data => console.log("Payload = ", data);
);