RxJS重构嵌套的映射语句

Question

我有一个服务,用于@angular/http从API加载数据.我想为我Components使用这些数据创建检索数据的投影.

因此我写了以下代码:

getById(id: string) {
  return this.http
    .get(`https://my-api.io/${id}`)
    .map(response => response.json())
    .map(contracts =>
      contracts.map(contract =>        # <- Nested map
        new Contract(
          contract['id'],
          contract['description']
        )
      )
    );
}

在第6行中,我有一个嵌套的map-Statement,降低了我的代码的可读性.

题

我可以做得更好吗？在RxJS中是否有一个操作符,我可以使用它而不是创建这种嵌套？

提前致谢!

Answer 1

我建议使用flatMap/selectMany将嵌套数组展平为每个单个数组元素的新流。在下一步中，您可以用来RxJS.map()进行实际的映射。最后将所有映射的数组元素收集RxJS.toArray()到一个新的可观察对象中，该可观察对象提供单个数组事件：

const stream = $http('http://jsonplaceholder.typicode.com/posts')
 .map(res => res.data)
 .flatMap(posts => posts)
 .map(post => Object.assign({}, post, { status: false }))
 .toArray();

请参阅此处的示例：http ://jsbin.com/vigizihiwu/1/edit?js,console

但我也会思考：这样做真的有必要吗？如果您只有一个订阅者，请将接收到的数组映射到那里：

const stream = $http('http://jsonplaceholder.typicode.com/posts')
 .map(res => res.data);

stream.subscribe(res => {
  const posts = res.map(post => Object.assign({}, post, { status: false }));
  console.log(posts);
});