【Angular】RxJSの理解

#RxJSとは

• リアクティブプログラミングを行うJavaScriptライブラリです

###リアクティブプログラミング

• 流れてくるデータ（ストリーム）に関連性と操作を宣言的に記述する手法のことです
  • 非同期処理で流れてくるデータを扱うのに効果的です
• ストリームはObservableクラスで扱います

###Observable

• Observableはストリームを扱うクラスです
  • 例：マウス操作やHTTPリクエストでデータ取得するなど
• ストリームは川の様なイメージです🌊
  • Observableを使うことで、ユーザがデータを川にながし、流れてくるものを途中で拾って加工したり並び替えたりするという処理を行うことができます🏊‍♀️

###オペレータ

• 川（Stream）の中間で処理する仕組みをオペレータといいます
  • pipeメソッドの中で指定している関数がオペレータです
• subscribe メソッドで、流れてきたデータを下流でキャッチして、オブジェクト間のデータのやり取りをします

#実際の流れ

1. 返り値のObservableで川を作って上流からデータを流す (この段階ではまだデータは流れていない)

gettMembers(): Observable<Member[]>{ // 非同期処理のため、rxjsを使用  
  return this.http.get<Member[]>(this.membersUrl)
    .pipe(                            // 中間処理は上から実行
      tap(members => this.log('猫一覧データを取得しました！ (データ取得後に表示してるよん)')), // 取得したことを確認
      catchError(this.handleError<Member[]>('getMembers', [])) // 取得失敗時に実行
    ); 
}

1. Observableのsubscribe メソッドで川の流れを発生させて、流れてくるデータを受けます (subscribe()して初めてリクエストが実行できる)

getMembers(): void{
  this.memberService.getMembers()
    .subscribe(members => this.members = members.slice(1, 5));
}

subscribeメソッドの中身

• 1引数：データ取得時のcallback
• 2引数：エラー時
• 3引数：処理完了時のcallback

observable.subscribe(
    value=>console.log(value);
    err => {},
    () => console.log('finish!!')
);

async pipe

• Observableをテンプレートで展開する仕組みです
• subscribe()は実行せず、テンプレート側で自動でデータを受け取ることができます
• 流れるデータを表示するだけのときに使いやすいです

<li *ngFor="let cat of cats$ |async">
  <a routerLink="/member/{{cat.name}}">{{cat.name}}</a>
</li>