我正在使用RXJS并想出了一个分页数据游标的实现。没有花太多时间进行反应式函数式编程，我想知道我的实现是否符合如何使用这个库的精神。
我想要一个可以从端点加载页面的类。如果您订阅它，您将收到查询的最后一页。第一个订阅导致第一页被自动查询。对“getPage”的调用应触发所有订阅的onNext。多个订阅不应导致多个请求。
我写了一个满足这个要求的基本例子，对我的思考过程进行了大量评论：https://jsfiddle.net/gfmn708g/1/
我的问题是：
（以下是每个SO问题指南的代码清单）
const logDiv = $("#log");
function log(message, cls) {
logDiv.append($("<li>").text(message).addClass(cls));
}
/* interface IRequest {
url: string;
page: number:
refresh?: boolean
}
interface IEndpoint {
get(request: IRequest): [];
} */
// Class that represents a cursor into paginated data
function PagedData(endpoint, url) {
this._endpoint = endpoint;
this._url = url;
// Our request queue is an observable of structurs of type IRequest
// We use a reply subject so that the last URL requested is in the stream when the first subscriber subscribes.
this._requestQueue = new Rx.ReplaySubject(1);
// This is our data observable, subscribe to it to
// A) receive the last page that this cursor has produced
// B) receive all future pages
this.items$ = this._requestQueue
// Don't re-query unless the "refresh" boolean is true
.distinctUntilChanged(req => req, (left, right) => right.refresh ? false : left.page == right.page)
// Make the request...
.flatMapLatest(request => Rx.Observable.of(request).zip(this._endpoint.get(request)))
// Wrap data returned with an envelope with data such as which page was requested
.map(data => {
const request = data[0];
const response = data[1];
return {
page: request.page,
url: request.url,
items: response
};
})
// Replay last page worth of data on each subscription
.shareReplay(1);
// Queue up the first page to be retrieved on first subscription
this.getPage(1);
}
PagedData.prototype.getPage = function(page, refresh) {
refresh = refresh || false;
// Fire off the workflow
this._requestQueue.onNext({
url: this._url,
refresh: refresh,
page: page
});
}
PagedData.prototype.dispose = function() {
// Question: this should unsubscribe ALL of the subscriptions to this.items$, right?
this._requestQueue.completed();
}
// -----------------
// EXAMPLE USAGE
var dummyEndpoint = {
get(request) {
log(`GET: ${request.url} at page ${request.page}`, "service");
return Rx.Observable.range(request.page * 10, 10)
.delay(1000)
.map(i => ({id: i, title: `Track ${i}`}))
.toArray();
}
};
const tracks = new PagedData(dummyEndpoint, "/api/tracks");
// This results in getting the first page
tracks.items$.subscribe(data => {
log(`On page ${data.page}, ${data.items.map(i => i.title).join(",")}`, "first")
});
// Wait one second after getting the first page
window.setTimeout(() => {
// Subscribe again, we will receive the first page with no re-query
tracks.items$.subscribe(data => log(`Got page ${data.page} after delay`, "second"));
// Get the second page
tracks.getPage(2);
// Wait another second after getting the second page
window.setTimeout(() => {
log("Getting second page (without refresh)");
// This shouldn't result in anything, since "refresh" is false/undefined
tracks.getPage(2);
// Wait one more second...
window.setTimeout(() => {
log("Getting second page (with refresh)");
// This should result in getting the second page, refresh is true
tracks.getPage(2, true);
// Should get rid of all subscriptions after the last in-flight request?
tracks.dispose();
}, 1000);
}, 2000);
}, 2000);
答案 0 :(得分：3)
Subjects不是很糟糕，因为它们往往会成为新用户的拐杖，所以他们不必实际使用范例（Observable和Observer的价格是一，我怎么能负担不才能使用它？）。
尽管我认为你的直觉是正确的，但使用ReplaySubject + shareReplay是一种代码气味。可能有用的是尝试思考实际来自何处的数据。在大多数情况下，功能本身并不存在，它们实际上是由其他东西触发的。
您需要找到其他内容并跟踪它，直到找到根源。在大多数情况下，此来源将是您可以使用fromEvent或fromPromise换行的用户或网络事件。一旦你有了这个起点，只需要将这个来源与你想要做的事情联系起来。
因此，我会重构您将端点调用Observable扩展名的业务逻辑：
Rx.Observable.prototype.paginate = function(endpoint, url) {
return this
.startWith({
page: 1,
refresh: false
})
.map(req =>
({page: req.page,url: url,refresh: req.refresh}))
.distinctUntilChanged(req => req,
(left, right) => right.refresh ? false :
left.page == right.page)
.flatMapLatest(request => endpoint.get(request),
(request, response) => ({
page: request.page,
url: request.url,
items: response
}))
.shareReplay(1)
}
以上将等待第一个订阅，然后在订阅发生时自动发出第一个请求。之后，每个后续订户将从分页中收到最新值。
从那里它将取决于你的来源，但我想你可能会做类似的事情：
var trigger = Rx.Observable.fromEvent($nextPageButton, 'click')
.scan((current, _) => current + 1, 1)
.paginate(endpoint, url);
trigger.subscribe(/*Handle result*/);
在这种情况下，您可能无法取消订阅，直到您的页面需要卸载，而您只需在加载时连接您的管道，它将负责其余部分。订阅trigger的所有时间总能为您提供最新数据。
我使用现有代码的重构添加了一个工作示例。
const logDiv = $("#log");
function log(message, cls) {
logDiv.append($("<li>").text(message).addClass(cls));
}
/* interface IRequest {
url: string;
page: number:
refresh?: boolean
}
interface IEndpoint {
get(request: IRequest): [];
} */
Rx.Observable.prototype.paginate = function(endpoint, url) {
return this
.startWith({
page: 1,
refresh: false
})
.map(req =>
({page: req.page,url: url,refresh: req.refresh}))
.distinctUntilChanged(req => req,
(left, right) => right.refresh ? false :
left.page == right.page)
.flatMapLatest(request => endpoint.get(request),
(request, response) => ({
page: request.page,
url: request.url,
items: response
}))
.shareReplay(1)
}
// -----------------
// EXAMPLE USAGE
var dummyEndpoint = {
get(request) {
log(`GET: ${request.url} at page ${request.page} with${request.refresh ? "" : "out"} refresh`, "service");
return Rx.Observable.range(request.page * 10, 10)
.delay(1000)
.map(i => ({
id: i,
title: `Track ${i}`
}))
.toArray();
}
};
var trigger = Rx.Observable.concat(
Rx.Observable.just({
page: 2
}).delay(2000),
Rx.Observable.just({
page: 2
}).delay(2000),
Rx.Observable.just({
page: 2,
refresh: true
}).delay(1000)
);
const tracks = trigger.paginate(dummyEndpoint, "/api/tracks");
tracks.delaySubscription(2000).subscribe(data => log(`Got page ${data.page} after delay`, "second"));
// This results in getting the first page
tracks.subscribe(data => {
log(`On page ${data.page}, ${data.items.map(i => i.title).join(",")}`, "first")
});#log li.first {
color: green;
}
#log li.second {
color: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.7/rx.all.js"></script>
<ol id="log">
</ol>