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.

我找到了这个答案:将分页的请求转换为可观察的RxJs流 但是它在评论中说:

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 ?)

-这是正确的方法吗?

-Is this the right approach ?

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

-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.

想法是，您正在创建延迟的可观察对象(因此它将被创建并仅在订阅后才开始获取数据)，并使用相同的可观察对象进行连接，但对于下一页，也将其与下一页进行连接，依此类推在 ... .而且所有这些操作都无需递归即可完成.

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屋！