[英]Reactive javascript - convert ajax calls to Bacon.js stream with pagination
如何通過分頁支持將對服務器API的調用轉換為Bacon.js / RxJs流?
對於分頁,我希望能夠存儲上次請求的item-index,並從該索引中請求下一個page_size項以填充流。
但是我只需要在流中的所有項目都已被讀取時才調用“ load next page_size items”方法。
這是我編寫的測試:
var PAGE_SIZE = 20;
var LAST_ITEM = 100;
var FIRST_ITEM = 0;
function getItemsFromServer(fromIndex) {
if (fromIndex > LAST_ITEM) {
return [];
}
var remainingItemsCount = LAST_ITEM-fromIndex;
if (remainingItemsCount <= PAGE_SIZE) {
return _.range(fromIndex, fromIndex + remainingItemsCount);
}
return _.range(fromIndex, fromIndex + PAGE_SIZE);
}
function makeStream() {
return Bacon.fromBinder(function(sink) {
var fromIndex = FIRST_ITEM;
function loadMoreItems() {
var items = getItemsFromServer(fromIndex);
fromIndex = fromIndex + items.length;
return items;
}
var hasMoreItems = true;
while (hasMoreItems) {
var items = loadMoreItems();
if (items.length < PAGE_SIZE) { hasMoreItems = false; }
_.forEach(items, function(item) { sink(new Bacon.Next(item)); });
}
return function() { console.log('done'); };
});
}
makeStream().onValue(function(value) {
$("#events").append($("<li>").text(value))
});
http://jsfiddle.net/Lc2oua5x/10/
當前,“ getItemsFromServer”方法只是一個虛擬對象,可在本地生成項目。 如何將其與ajax調用或返回項目數組的promise結合使用? 並且可以執行未知次數(取決於服務器上的項目數和頁面大小)。
我閱讀了有關Bacon.fromPromise()的文檔,但無法與分頁一起使用。
您需要使用flatMap
將頁面映射到使用Bacon.fromPromise
創建的流。 這是一個工作示例,其中我使用jsfiddle echo端點(它將相同的數據發送回)
Bacon.sequentially(0, _.range(0,5))
.map(toIndex)
.flatMap(loadFromServer)
.onValue(render)
function toIndex(page) {
return page * PAGE_SIZE
}
function loadFromServer(index) {
var response = getItemsFromServer(index)
return Bacon.fromPromise($.ajax({
type: 'POST',
dataType: 'json',
url: '/echo/json/',
data : { json: JSON.stringify( response ) }
}))
}
function render(items) {
items.forEach(function(item) {
$("#events").append($("<li>").text(item))
})
}
http://jsfiddle.net/1eqec9g3/2/
注意:此代碼依賴於來自服務器的響應(發送順序相同)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.