Ionic Angularで通信時にLoading Controllerを利用するコードを考える

本記事は Ionic Framework / Capacitor / Stencil Advent Calendar 2021 Advent Calendar 2021 の記事です。

---

通信時にLoading Controllerをだしたい場合はよくあります。何も考えずにページコンポーネントで書くと以下のような感じになります。

async connectEvent():void {
  const loading = await this.loadingController.create();
  await loading.present();
  this.httpClient.get<Type>(url)
    .subscribe({
      next: () => {},
      error: () => {},
      complete: () => {
        loading.dismiss();
      },
    });
}

ただこれだと値のハンドリングを行う場合、ページコンポーネントで直書きになってしまうので手間ですよね。そこでServiceに移動させたらこんな感じになります。

async getData(): Observable<Type> {
  return from(this.loadingController.create().then(d => d.present())).pipe(
    concatMap(() => 
        this.httpClient.get<Type>(url)
            .pipe(
              finalize(() => this.loadingController.dismiss())
            )
    ));
}

loadingController.create() がPromiseベースなので、 from() で変換します。そして、 concatMapで通信と紐つけて、通信が完了したら finalize で dismiss を行います。

こうすると、ページでは以下のように書くことができます。

connectEvent() {
  this.service.getData().subscribe(/.../)
}

これだけでローディングインディケーターが表示され、通信が完了すると終了します。
通信に紐付くものは通信側（Service）に紐つけて自動的に処理してしまうと、ページコンポーネントの見通しがよくなっていいですよね。それではまた。