angular - RxJS 重构嵌套 map 语句

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']
        )
      )
    );
}

在 6th 行中，我有一个嵌套的 map - 语句降低了我的代码的可读性。

问题

我可以做得更好吗？我可以使用 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);
});