ページネーションするAPIで1ページ目から最後まで順番に取得する方法

Question

###前提・実現したいこと

Angular(5系)でSPAを作成しています。
ここで、ページネーションするAPIで、RxJSを用いて1ページ目から最後まで順番に取得したいのですが、うまく行かず困っています。
言い換えると「Observableの非同期処理を直列で実行(回数は受け取るデータによって判断)」
という感じでしょうか。。

調べてみるとconcatMapが見つかるのですが、
どのサンプルも回数が分かってる(決まってる)ようなものしかなく、
今回のように、受け取ったデータを見て判断するものが見つかりませんでした。

鍵になるRxJSのオペレータ、メソッド、
または参考になりそうな記事などお教えいただけないでしょうか。
(もちろん下記のコードを埋めていただいても大歓迎です。)
よろしくお願いいたします。

ソースコード

interface ResponseData {
  data: Item[];
  current_page: number;
  last_page: number;
  // ...省略
}

class ApiService {
  constructor(private http: HttpClient) {}

  // ページを指定して、リクエストを投げる (これを順番に実行したい)
  fetch(page: number): Observable<ResponseData> {
    const params = { page: page + '' };
    return this.http.get<ResponseData>('api/items', { params });
  }

  // 1ページ目から最後まで、順番にリクエストを投げる
  fetchAll(): Observable<ResponseData[]> {
    // ここを実装したい
  }
}

Comments

[karamarimo]

「受け取ったデータを見て判断する」というのはコード中の何について言っているのでしょうか？また、順番に取得したいというのはリクエストも同時に1つしか行わないということでしょうか？

Answer 1

今回のように、受け取ったデータを見て判断するものが見つかりませんでした。

レスポンスデータを受け取ってから判断するということは、少なくとも始めのレスポンスを受け取るまで待たないといけませんよね？
動作確認はしていないので、細かいミスがあるかもですが、だいたいこんな感じでできる気がします。

lastPageNo$: Observable<number>;
allData$: Observable<ResponseData[]>;

fetchAll(): Observable<ResponseData[]> {
    lastPageNo$ = this.fetch(1).pipe(
      filter(page1 => page1.last_page > 1)
      map(page1 => page1.last_page)
    );

    lastPageNo$.subscribe(lastPageNo => {
     const request$: Observable<ResponseData>[] = // 省略：ループで1~lastPageNoまでのObservableを取得
　　　// forkJoinでObservable<ResponseData[]>に変換し、必要ならパイプでエラーハンドリング
　　　this.allData$ = forkJoin(request$)；
   });

  return this.allData$.pipe(filter(items = !!items));
  }