寝て起きて寝て

プログラミングが出来ない情報系のブログ

RxJSの基礎

そもそもRxJSとは

リアクティブプログラミングを行うJavaScriptライブラリ これを使ってAngularのリアクティブプログラミングを行う

これを実現するために使うのが Observable これによってデータを流すための 川のようなものを作る

流れてくるデータ(ユーザーが入力したりapiのレスポンスが来たり)のことを ストリーム と言い、 データを加工していくことを オペレータ という(オペレータはpipeの中に書くもの)

流れてきたデータを受け取れるメソッドが Subscribe SubscribeはObservableを返り値として受け取るだけではObservableは実行されないので Subscribeを呼び出して実行する必要がある

Observableを継承しているSubjectを使うと色々できる 宣言はこんな感じ

private test = new Subject<string>()

Subscribeの引数

Subscribeの引数は 第一引数ではデータを受け取った際のコールバック 第二引数ではエラー時のコールバック 第三引数では処理が完了した時のコールバックを記載できる

observable.subscribe(
  value => console.log(value),
  err => {},
  () => console.log('this is the end')
);

Observableをテンプレートで展開

Observableをテンプレートで展開するには | asyncを使う

書き方的には下記のような感じ 下記のmembersはObservable型

<li *ngFor="let member of members | async">
  {{member.name}}
</li>

この書き方をするとsubscribeを使用しなくてもObservableを展開することができる 単純に受け取ったデータを表示するだけの場合はこれを使うと良い