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和cache中：

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，可能与按钮事件相关联，因此每次点击按钮都会触发新请求。

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

1 个答案: