请教一个 rxjs 问题。。。。。。

[weishijun14]

我有一个需求，

1. 我点击按钮，
2. 获得数组，长度为 100
3. 我会使用其中三个
4. 当我再次点击按钮的时候，我希望不用重新获得，因为还有 97 个未用完。直接 97 - 3 即可。
5. 直到 100 个全部用完，才再次发送请求获取下一个 100 个数据。

求教，，， 或者说一下关键的思路，， 我是 rxjs 新手，百思不解了。。

[xcstream]

思考了一下 好像不需要 rxjs 也很好写

[weishijun14]

@xcstream 我在学 rxjs 这是我找的一个练习。。

[sivacohan]

我没用过 rxjs，你这个需求就是要实现个 queue。
每次远程取到的数据先入 queue，然后再从 queue 里面取数据到本地。

[godoway]

应该是背压？
在 rxjava 里面叫 Flowable，rxjs 里面好像没见有

[shadeofgod]

写了个类似的逻辑，数组长度是 3，每次消耗 1 个，消耗完了才重新请求。

https://codesandbox.io/s/4xk3kkok09?expanddevtools=1&fontsize=14&hidenavigation=1&theme=dark

[shadeofgod]

但感觉不太对，我也是很少用 rx

[Perry]

可能需要另外一条线 track 需不需要再请求

[cuzfinal]

你为什么不看看文档呢

[meteor957]

@cuzfinal 你又知道人家没看过文档？

[wly19960911]

datasource 的队列别拿 rxjs 做，这个是舍近求远的行为。只需要做个 queue 然后调用方法获取到队列前三位就行了。

直接 fromEvent(window, 'click').pipe(
switchMap(v => fromPromise(datasource.get(3))),
).subscribe(() => {});

[GiantHard]

Rx 是用来“推”数据的，而你的需求是“拉”数据，这就可以用到 IxJS： https://codesandbox.io/s/rx-ix-t21qn

[lijsh]

https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

[momocraft]

什么叫"使用" "获得"?

[weishijun14]

@lijsh 我就是看了这篇，但是我做的东西和他又稍有不同。。。我增加了一些新特性。。

[weishijun14]

@wly19960911 你的意思是前端只管取就好了。。100 -3 的行为交给后端么。。

[weishijun14]

@momocraft 使用就是 view 层只需要显示 3 个。 获得就是发请求。

[weishijun14]

@GiantHard 大佬又引入一个库啊。。。
@cuzfinal 文档也在看。。但是就是没有头绪。。

anyway 谢谢🙏楼上各位大佬解答。。

[weishijun14]

@shadeofgod 我研究下你这个代码。。

[yoyooyooo]

只是缓存个数组的话也没必要用 rxjs，强行用的话另外搞个 BehaviorSubject 存起来好了，不是 rxjs 熟练工，简单实现：

const data$ = new BehaviorSubject([]);

fromEvent(document, "click")
.pipe(
withLatestFrom(data$),
switchMap(([e, data]) => {
return data.length < 3
? from(defer(() => mockFetch())).pipe(tap(v => data$.next(v)))
: of(data);
}),
tap(data => data$.next(data.slice(0, data.length - 3))),
tap(data => {
console.log(data);
})
)
.subscribe();

[mxT52CRuqR6o5]

根据前面的评论学习了一下，这应该是背压问题，google 了一下有官方指导
http://reactivex.io/documentation/operators/backpressure.html
关键应该是在 ControlledObservable 上