Question

我查看了各种网页，包括以下堆栈溢出问题：How to get data from observable in angular2

所有信息都表明我需要订阅Observable，然后在下一个函数中对数据进行某些操作，这正是我正在做的事情。但是，登录到控制台的不是请求的主体，而是其他看起来像这样的东西。

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()来获取Observable的正文，但这只会返回一个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字符串，因此我实际上可以对其进行处理。我需要将流映射到对象还是其他东西？

Answer 1

我不确定您为什么在这里使用from。我假设您在这里所需要做的只是点击API网址并从中获取数据。

如果确实是这种情况，则只需在get上使用HttpClient方法，就必须将其作为依赖项注入到组件中。

此外，要使用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')
  );

但是这是Http在Angular 4.3和以前版本的Angular期间曾经做过的事情，但最终由于弃用HttpClient而不再需要调用{ json方法来获取准确的响应数据。

这是您推荐的Enzyme。

Answer 2

fetch返回带有Promise的{{1}}。您可以使用json()方法。

Response

Answer 3

如果使用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);
});

订阅输出后，如何处理使用rxjs.from检索的Observable？

3 个答案: