javascript - Rxjs 可观察到的 : subscribe to different values with one API call

Question

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

例如:GET/posts

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

我如何创建一个可观察对象，其中 HTTP 查询只执行一次，但我可以在其中订阅总值或项目列表？

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

我首先尝试了这个并且成功了:

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

但我不喜欢这样，因为我不能将我的接口(interface)用于 Post 实体(或者我必须定义一个像那样的接口(interface) {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，这样每次按钮点击都会触发一个新请求。