使用 rxjs 获取带有数组的 http 请求答案

【问题标题】：http get request with array using rxjs使用 rxjs 获取带有数组的 http 请求
【发布时间】：2018-06-28 17:28:33
【问题描述】：

this.data 是json 对象的数组，我只是想找到一种方法来解析各个对象（在这种情况下，只需打印到控制台即可）方法getData()之后的数据正确。这两种方法都以 this.http.put 和 this.http.get 的形式返回 observables

this.persistanceData.setData(this.data)
              .subscribe((res: any) => { });

this.persistentDataService.getData()
              .map(res => res.json())
              .subscribe(data => data.map(item => console.log(item)))

【问题讨论】：

标签： json angular http rxjs

【解决方案1】：

在 Angular 2+ 中，我们正在处理两种异步事件。它们是 Promise 和 Observables。

Promise 可以处理单个异步任务，而 Observables 可以处理多个事件。

如果您要处理多个事件，则需要使用 Observables。

在您的提供程序上导入 Observable，如下所示。

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { Response } from '@angular/http';

根据任务，您可以更改 rxjs 运算符。

在这种情况下，我们要将响应更改为 json。

getData():Observable<any> {
  return this.http.get('192.168.1.1:8081/users/user_id=1')
    .map((response:Response) =>response.json())
}

上述方法只是将响应返回为 JSON，无需在页面或组件中将响应更改为 json()。

使用 Observable 的任何疑问请使用此链接https://codecraft.tv/courses/angular/http/http-with-observables

【讨论】：

适用于 json 对象，但不适用于 [ {..}, {...} ] 中的对象数组

【解决方案2】：

由于您使用的是 Angular 2，因此 .pipe() 没有用处，并且早期版本的 rxjs 6

的导入不同

您的 getData() 函数应该与 persistentDataService 中的类似：

getData(): Observable<any> {
  let baseURL = 'http://your-url';
  return this.http.get(apiURL) 
      .map(res => { return res.json(); });
}

您当然应该在服务中导入以下内容：

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

然后，您可以返回到您的组件并管理返回的 Observable 并订阅 init（例如 ngOnInit）：

ngOnInit() {
    this.persistentDataService.getData()
              .subscribe(data => console.log(data)))
}

不要忘记在你的构造函数中注入你的服务，实现 OnInit 接口并安装 rxjs 版本低于 6。

【讨论】：

我想我有 angular 2 如果这有影响的话。但是，我遇到了管道错误（它无法识别地图）
这很重要。已编辑。
适用于 json 对象，但不适用于 [ {..}, {...} ] 中的对象数组