Angular 一旦订阅了输出，我该如何处理使用rxjs.from检索的可观察对象？

我查看了各种网页，包括这个堆栈溢出问题：

所有的信息都说我需要订阅可观察的，然后在下一个函数中对数据做一些处理，这正是我正在做的。但是登录到控制台的并不是请求的主体，而是其他类似的内容

Response {type: "cors", url: "https://reqres.in/api/users?page=1", redirected: false, status: 200, ok: true, …}
body: ReadableStream
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: ""
type: "cors"
url: "https://reqres.in/api/users?page=1"
__proto__: Response

我可以使用

body（）

获取可观察对象的主体，但这只返回一个

ReadableStream

对象，而不是我期望的JSON字符串

这是我的密码

 const data = from(fetch('https://reqres.in/api/users?page=1'));

    data.subscribe({
      next(response) {
        console.log(response);
        },
      error(err) { console.error('Error: ' + err); },
      complete() { console.log('Completed'); }
    });

---

我需要做些什么来获取在指定端点处找到的JSON字符串，以便实际使用它。是否需要将流映射到对象或其他对象？

fetch

正在返回带有

响应的
承诺。你可以使用这个方法

fetch
正在返回带有
响应的
承诺
。你可以使用这个方法

我只是不知道你为什么要在这里使用
from
。我假设您只需要点击API url并从中获取数据

如果确实是这样，您只需在
HttpClient
上使用
get
方法，就可以将其作为依赖项注入组件中

另外，要使用
HttpClient
，您必须将
HttpClientModule
添加到模块的
imports
数组中

如果您确实遵循了这一点，那么您的代码可以进行如下转换：

constructor(private http: HttpClient ) {}

....

getData() {
  this.http.get('https://reqres.in/api/users?page=1').subscribe(
    response => console.log(response),
    err => console.error('Error: ' + err),
    () => console.log('Completed')
  );
}

如果您仍然想使用
from
和
fetch
，那么您必须按照m1gu3l的建议进行操作

const data = from(fetch('https://reqres.in/api/users?page=1').then(res => res.json()))
  .subscribe(
    response => console.log(response),
    err => console.error('Error: ' + err),
    () => console.log('Completed')
  );

但是在Angular 4.3和Angular的早期版本中，
Http
曾经做过这样的事情，但最终被弃用，取而代之的是
HttpClient
，您不需要调用
json
方法来获得准确的响应数据


这是给你的裁判的一封信

我只是不知道你为什么要在这里使用
from
。我假设您只需要点击API url并从中获取数据

如果确实是这样，您只需在
HttpClient
上使用
get
方法，就可以将其作为依赖项注入组件中

另外，要使用
HttpClient
，您必须将
HttpClientModule
添加到模块的
imports
数组中

如果您确实遵循了这一点，那么您的代码可以进行如下转换：

constructor(private http: HttpClient ) {}

....

getData() {
  this.http.get('https://reqres.in/api/users?page=1').subscribe(
    response => console.log(response),
    err => console.error('Error: ' + err),
    () => console.log('Completed')
  );
}

如果您仍然想使用
from
和
fetch
，那么您必须按照m1gu3l的建议进行操作

const data = from(fetch('https://reqres.in/api/users?page=1').then(res => res.json()))
  .subscribe(
    response => console.log(response),
    err => console.error('Error: ' + err),
    () => console.log('Completed')
  );

但是在Angular 4.3和Angular的早期版本中，
Http
曾经做过这样的事情，但最终被弃用，取而代之的是
HttpClient
，您不需要调用
json
方法来获得准确的响应数据


这是给你的裁判的一封信

如果使用fetch（）而不是Angular的HTTPClient，则必须将其转换为JSON-

const data = from(fetch('https://reqres.in/api/users?page=1'));

data.map(res => res.json()).subscribe(json =>{
  console.log(json);
});

如果使用fetch（）而不是Angular的HTTPClient，则必须将其转换为JSON-

const data = from(fetch('https://reqres.in/api/users?page=1'));

data.map(res => res.json()).subscribe(json =>{
  console.log(json);
});

这不起作用，承诺仍然被包装在一个可观察的文件中，所以如果我做
Console.log（response.json（））
的话，我得到的只是
promise{}uuuu-proto}:promise[[PromiseStatus]]：“resolved”[[PromiseValue]]：Object
这可能取决于rxjs版本，但在一段时间内，从unwraps承诺来看，这不起作用，承诺仍然被包装在一个可观察的文件中，因此如果我执行
Console.log（response.json（））
所得到的只是
promise{}\uuuuu-proto:promise[[PromiseStatus]]：“resolved”[[PromiseValue]]：Object
这可能取决于rxjs的版本，但是有一段时间，从unwraps Promises开始，使用来自
的
是因为我试图复制这个网站所描述的内容：@Jake12342134，我还更新了一个工作示例stackblitz，可能会有所帮助：）它成功了，谢谢！不过有一个小问题。我现在有了response对象，我想在response中获取保存用户数据的
data
数组，我已经尝试了
response[data]
，但是这给出了一个错误，我需要做什么才能访问它？使用
from
是因为我试图复制这个网站描述的内容：@Jake12342134，我还更新了一个工作示例stackblitz，这可能会有所帮助：）确实如此，谢谢！不过有一个小问题。我现在有了response对象，我想在响应中获取保存用户数据的
数据
数组，我已经尝试了
response[data]
，但是这会产生错误，我需要做什么来访问它？