我有一个 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() 方法来加载列表这一事实。
最佳答案
如果只需要运行一次可以直接缓存值:
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
,这样每次按钮点击都会触发一个新请求。
关于javascript - Rxjs 可观察到的 : subscribe to different values with one API call,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37213838/