RxjsObservable:通过一个API调用订阅不同的值

Rxjs Observable : subscribe to different values with one API call

本文关键字：调用 API 一个 RxjsObservable      更新时间：2023-09-26

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

例如：GET /posts

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

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

我是在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（）方法来加载列表。

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

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，因此每次单击按钮都会触发一个新的请求。

相关文章：