如何使用rxjs顺序加载数据？在每个序列中可能有几个调用

Question

const dates = [{start:'03/06/2020', end: '03/09/2020'}, {start:'03/12/2020', end: '03/03/2021'}, ...]

const data = service.get(page = 1, dates[0]) and service.get(page = 2, dates[0]) returns 数据，但如图所示，可能有 n 页...并且在调用另一个日期之前需要获取每个页面数据。

data.subscribe(resp=> somesubject.next(this.values = this.values.concat(resp))) 'resp' 是每个 api 调用的结果。每个日期的所有值基本上都连接在客户端中。

处理此问题的最佳方法是什么？如果您有任何问题，请告诉我。

Answer 1

有了这些初步假设/假设：

dates 是一组日期间隔（或范围），可以查询一些数据
PageResponse 是从 api 服务返回的一种响应，其中包含返回的当前页码和返回的项目。
getPage 是一种针对特定日期间隔和页码 returns 和 Observable<Response> 的方法。（从 0 开始）。当没有更多结果时，响应包含一个空的项目数组。

  export type PageResponse = {
    page: number;
    items: any[];
  };

  getPage(dateInterval: any, page: number): Observable<Response> {
    // use dateInterval to query expected data...
    // or call service.get...
    return this.http.get<PageResponse>(`http://.../pages/${page}`);
  }

你可以做到

from(dates)
      .pipe(
        concatMap(dateInterval =>
          this.getPage(dateInterval, 0).pipe(
            expand(response => {
              if (response.items?.length) {
                return this.getPage(dateInterval, response.page + 1);
              } else {
                return EMPTY;
              }
            }),
            map((page) => page.results)
          )
        ),
        mergeAll(),
        toArray()
      )
      .subscribe(results => {
         // results is a flat array of all items returned
         ...
      });

当然，这段代码只是一个示例，需要根据您的情况进行调整。缺少某些类型（例如项目），但这只是为了让示例在这里保持简单。

如何使用rxjs顺序加载数据？在每个序列中可能有几个调用

How to sequentially load data using rxjs? in each sequence might be several calls

rxjs

typescript

angular

angular5

angular8