【Angular】【RxJS】Observerについて
みなさんこんにちは!!
株式会社エムアイ・ラボのエンジニアです。
今回は、RxJSを理解する上で欠かせないObserverについて簡単にまとめてみたいと思います。
まず、Observerを説明する前にObservableについておさらいをします。
■ Observableとは
RxJSにおいてObservableとは、イベントやデータをストリームとして扱うクラスです。
Observableは「川」として例えられることが多いです。 なぜなら、川(Observable)にはいろいろなモノ(value)が流れています。川と同じでそのままではvalueは流れていってしまいます。
そのため、valueを受け取る(Observer)、受け取る前に加工(Operators)、Observableをキャンセルする(unsubscribe)等の処理があり、RxJSを構成する要素として一つずつ理解していくことが大事になってきます。
「PromiseとObservableの違い」についてまとめた記事はこちら
■ Observerとは
ObserverはObservableからの通知を処理するための3種類のコールバックメソッドを持っているオブジェクトです。
Observerを使うには購読(subscribe)する必要があります。
Observableを定義しただけでは値は流れず、subscribeすることで初めて値が受け取れます。
3種類のコールバックメソッドについて
「next」「error」「complete」の3つのメソッドがあります。
-
next: 必須であり、新しい値が流れてくるたびに呼び出されます。 引数にはObservableから受け取った値を取ります。
-
error: Observableからエラー通知を受けとった際に呼び出されます。引数にはエラーが渡されます。これ以降のObservableの実行を停止するので、errorの後にnextやcompleteには流れません。
-
complete: Observableから完了通知を受け取った際に呼び出されます。completeの後にnextやerrorには流れません。
サンプルコード
import { Observable, of } from 'rxjs';
// ofで引数の値をobservableに変換
const observable$: Observable<number> = of(10, 20, 30);
observable$.subscribe({
next: (res: number) => console.log(res * res),
error: (err: Error) => console.error('Error:', err),
complete: () => console.log('complete!!')
});
// 結果
// 100
// 400
// 900
// complete!!
直接メソッドを渡す場合
- nextしか定義しない場合は下記のように直接メソッドを渡す方法も可能です。
※ errorやcompleteを定義する場合は非推奨です。
import { Observable, of } from 'rxjs';
const observable$: Observable<number> = of(10, 20, 30);
observable$.subscribe((res: number) => {
console.log(res * res);
});
// 結果
// 100
// 400
// 900
エラー通知を受け取った後の挙動
- errorの後は、next/completeは発火しません。
import { Observable, of } from 'rxjs';
const observable$: Observable<number> = new Observable(subscriber => {
subscriber.next(10);
subscriber.error(20);
subscriber.next(30);
subscriber.complete();
});
observable$.subscribe({
next: (res: number) => console.log(res * res),
error: (err: Error) => console.error('Error:', err),
complete: () => console.log('complete!!')
});
// 結果
// 100
// Error: 20
完了通知を受け取った後の挙動
- completeの後は、next/errorが発火しません。
import { Observable, of } from 'rxjs';
const observable$: Observable<number> = new Observable(subscriber => {
subscriber.next(10);
subscriber.next(20);
subscriber.next(30);
subscriber.complete();
subscriber.next(40);
subscriber.error(50);
});
observable$.subscribe({
next: (res: number) => console.log(res * res),
error: (err: Error) => console.error('Error:', err),
complete: () => console.log('complete!!')
});
// 結果
// 100
// 400
// 900
// complete!!
■ まとめ
今回は、Observerについてまとめてみました。
RxJSを使い始めた頃は、値が受け取れない原因がわからず躓いたことを思い出しました。
まずは、RxJSについてのイメージを掴み、その上で公式リファレンスを読んだ方が理解度が深まると思います。
■ 参考文献
■ 採用情報
エムアイ・ラボでは一緒に働くメンバーを募集しています。
ぜひお気軽にご連絡ください！
まずはオンラインでカジュアルにお話ししてみませんか？
Wantedlyアカウントをお持ちでない方はTwitterのDMからでも大丈夫です。
お待ちしております。
Discussion