Rxjs Observable：通过一次 API 调用订阅不同的值

Question

我有一个 CRUD API，实体上的 get 返回当前过滤器配置的列表和项目总数。

例如：GET /posts

{
    "items": [
        {
             "id": 1,
             "title": "post title 1"
        }
        ...
    ],
    "total": 9
}

如何创建一个只执行一次 HTTP 查询但我可以订阅总值或项目列表的 observable？

我在使用 typescript 的 Angular2 上下文中。

我第一次尝试，它成功了：

this.http.get('/api/posts').map(response => response.json()).subscribe(data => {
  var items = data.items
  var total = data.total
});

但我不喜欢这样，因为我不能将我的接口用于 Post 实体（或者我必须定义一个像 {items: Post, total: number} 这样的接口，这不是很优雅）。我想做的是这样的：

this.myPostService.totalObservable.subscribe(total => this.total = total)
this.myPostService.itemsObservable.subscribe(items => this.items = items)

但不会触发 2 个查询。

我查看了这篇博文：https://coryrylan.com/blog/angular-2-observable-data-services，但我不喜欢你先订阅然后调用 list() 方法来加载列表的事实。

Answer 1

如果只需要运行一次就可以直接缓存值：

var source = this.http.get('/api/posts').map(response => response.json()).publishLast();

//unsubscribe from this when you are done
var subscription = source.connect();

那么你可以将这两个来源暴露为：

var totalObservable = source.pluck('total');
var itemsObservable = source.pluck('items');

另一方面，如果您需要多次调用这些 Observable，那么我建议您将 get 包装在一个触发 Observable 中并缓存：

var source = sourceTrigger
  .startWith(0) //Optionally initialize with a starting value
  //This ensures that only the latest event is in flight.
  .flatMapLatest(() => this.http.get('/api/posts'), (_, resp) => resp.json())
  .cache(1);

//Again expose these items using `pluck`
var totalObservable = source.pluck('total');
var itemsObservable = source.pluck('items');

在第二种情况下，sourceTrigger 将是一个可能连接到按钮事件的Observable，因此每次按钮单击都会触发一个新请求。