gpt4 book ai didi

javascript - 响应式(Reactive) javascript - 将 ajax 调用转换为带有分页的 Bacon.js 流

转载 作者:行者123 更新时间:2023-11-28 00:08:41 25 4
gpt4 key购买 nike

如何将对具有分页支持的服务器 API 的调用转换为 Bacon.js/RxJs 流?

对于分页,我希望能够存储最后请求的项目索引,并请求该索引中的下一个 page_size 项目来填充流。

但我需要仅当流中的所有项目都已被读取时才调用“加载下一个 page_size 项目”方法。

这是我编写的测试:

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/

注意:此代码依赖于来自服务器的响应,响应的顺序与发送的顺序相同。

关于javascript - 响应式(Reactive) javascript - 将 ajax 调用转换为带有分页的 Bacon.js 流,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31101840/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com