RxJs 可观察分页 [英] RxJs Observable Pagination

问题描述

第一:这是我使用 RxJs 的第一个项目，我认为使用它我会学得最好.

First: This is the first project in which I am using RxJs, I thought I will learn best by using it.

我找到了这个答案:将分页请求转换为 Observable使用 RxJ 进行流式传输但它在评论中说:

I found this answer: Turning paginated requests into an Observable stream with RxJs But it says in the comments:

您仍然超出了最大调用堆栈.大约返回了 430 页.我认为递归可能不是这里的最佳解决方案

You're exceeding the maximum call stack still. At around 430 pages returned. I think recursion might not be the best solution here

我想查询 Youtube Data API，结果以页面形式返回，我需要对它们进行分页.我想象这样的工作流程可以工作:1)发起呼叫2)检查响应是否有nextPageToken"3)如果有，再向 Youtube API 发出请求4)如果没有，完成

I want to query the Youtube Data API, the results come back in pages and I need to paginate through them. I imagined a work flow like this could work: 1)Initiate a call 2)Check if the response has a 'nextPageToken' 3)If it has, do another request to the Youtube API 4)If not, finish

So to do this I could Imagine the following Observables / streams:
FirstRequestStream -A-X--------------->
ResponseStream     -A-A-A-A--X-------->
RequestStream      -I-A-I-A----------->
A = Action
I = Info from upper stream
X = Termination

(不确定这张图是否按照我制作的方式正确)

(Not sure if this diagram is correct the way I made it)

所以 ResponseStream 依赖于 FirstRequestStream 和 RequestStream(使用合并函数).RequestStream 依赖于 ResponseStream(这是否称为循环可观察对象?)

So the ResponseStream depends on FirstRequestStream and RequestStream(using the merge function). The RequestStream depends on the ResponseStream( is this called a circulating observable ?)

-这是正确的方法吗?

-循环观察"是一件好事，它们甚至可能吗?(我在创建一个时遇到了问题).

-Are 'circulating observables' a good thing, are they even possible ?(I had problems creating one).

-我应该先尝试其他方法吗?

-Any other way I should try first?

-是否可以创建相互依赖的可观察流?

-Is it possible to create interdependent observable streams ?

感谢您的帮助.

推荐答案

你把这个问题复杂化了，使用 defer 运算符可以更容易地解决它.

You are overcomplicating this problem, it can be solved a lot easier using defer operator.

想法是您正在创建延迟的 observable(因此它将被创建并仅在订阅后开始获取数据)并将其与相同的 observable 连接起来，但对于下一页，它也将与下一页连接起来，等等在 ... .所有这些都可以在没有递归的情况下完成.

Idea is that you are creating deferred observable (so it will be created and start fetching data only after subscription) and concatenate it with the same observable but for the next page, which will be also concatenated with the next page, and so on ... . And all of that can be done without recursion.

代码如下:

const { defer, from, concat, EMPTY, timer } = rxjs; // = require("rxjs")
const { mergeMap, take, mapTo, tap } = rxjs.operators; // = require("rxjs/operators")

// simulate network request
function fetchPage(page=0) {
  return timer(100).pipe(
    tap(() => console.log(`-> fetched page ${page}`)),
    mapTo({
      items: Array.from({ length: 10 }).map((_, i) => page * 10 + i),
      nextPage: page + 1,
    })
  );
}

const getItems = page => defer(() => fetchPage(page)).pipe(
  mergeMap(({ items, nextPage }) => {
    const items$ = from(items);
    const next$ = nextPage ? getItems(nextPage) : EMPTY;
    return concat(items$, next$);
  })
);

// process only first 30 items, without fetching all of the data
getItems()
 .pipe(take(30))
 .subscribe(e => console.log(e));

<script src="https://unpkg.com/rxjs@6.2.2/bundles/rxjs.umd.min.js"></script>

这篇关于RxJs 可观察分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！