Skip to content

Instantly share code, notes, and snippets.

@MSakamaki
Last active August 7, 2016 08:07
Show Gist options
  • Save MSakamaki/0896b7f544a22e7e1f77 to your computer and use it in GitHub Desktop.
Save MSakamaki/0896b7f544a22e7e1f77 to your computer and use it in GitHub Desktop.
RxJS

RxJSめも

RxJSは4系と5系の2種類ある本ソースでは5系を使用している

ライブラリ

Rxのコアモジュール、必要最低限のRxJSを使いたい場合はこれrx.core.jsっぽいけど使った事はない。

高機能なRxJSモジュール、だいたいそろってるrx.all.jsにあたるのかrx.jsにあたるのか・・・ そもそもrx.jsrx.all.jsの違いがわからん

TODO: 調べる

Rxの軽量モジュール、とりあえず下位互換を意識して簡単に使うなら、rx-lite.jsで使える

主軸となる機能

Observable

観測可能 (observable) なシーケンスを作り出す ObserverはObservableの変化に対するストリームを行う処理を扱う事が出来る。

Operators

Rxで使える演算子の事

やりたいこと逆引き1 やりたいこと逆引き2

Single

rx.Singleは1回しかストリームを作らない子 Promise的なのに使う

Subject

SubscriberObservableの2つの機能を併せ持ったもの、 SubscriberにあるようなonNextやonError、onCompleteといったメソッドを呼び出せ、Observableのようにsubscribeメソッドを呼び出すことができる

Scheduler

処理をどのタイミングで実行するのかを振り分ける機能。 スケジューラが間に入ることで、スレッドの切り替えや実行順序の変更などができるようになる。 非同期並列処理の安全で簡単な管理をする為に使う。

Core observable

RxJSの本体

Observer API

API

amb

最初に来たやつに反応する子

case

分岐条件を作る

処理ではObjectのKeyになるものを取り出してるだけっぽいので文字列もしくは数値を想定してるっぽい

時間やObjectでの分岐とかは想定されてないようなので、動作は自己責任 上記処理なら多分symbolも動くんでは?

引数は
  1. 分岐条件処理
  2. データ
  3. オブザーバまたはスケジューラー

combineLatest


take シリーズ

take

指定した回数定義したストリームを繰り返す。 用途は多分APIの失敗のリトライとか

intervalと組み合わせた簡単なサンプル

Rx.Observable
  .interval(1000)
  .timeInterval()
  .take(10)
  .subscribe(x=> console.log('Next: ', x));
takeLast

複数回繰り返すStreamの最後x回を実行する。

takeLastBuffer

takeLast戸の違いは、次のStreamに配列に纏める。

takeLastBufferWithTime
  • timerイベントの実行された最後のx秒分をBuffrerにつめる。
  • 第二ひきすうにRx.Scheduler.xxxを指定する事も出来る。
Rx.Observable
    .timer(0, 100)
    .take(10)
    .takeLastBufferWithTime(500)
    .subscribe(x=> console.log('Next: ', x));
takeLastWithTime

timerイベントのtakeLast

takeUntil

しきい値までのovserverイベント(or Promise)を生成します。

takeUntilWithTime

中身的には以下っぽい

Rx.Observable
  .timer(0, 1000)
  .takeUntil(Rx.Observable.timer(5000))
takeWhile

時間系

timer

指定した時間が過ぎるとシーケンスを生成するobserver tx.lite.jsはrelative time のみサポート

  • 引数
    1. dueTime (Date|Number): 日付だとそれが発火するとき、ミリ秒の場合relative time
    2. [period|scheduler=Rx.Scheduler.timeout] (Number|Scheduler): 次の値を生成する為の期間、もしくは第一引数のタイマーを実行する為のスケジューラ、指定しない場合は繰り返し処理を行わない
    3. [scheduler=Rx.Scheduler.timeout] (Scheduler): タイマーを実行します、指定しない場合はタイムアウトを実行する。

例外処理

catch

みんな大好きcatch構文例外処理をつかみ取る

引数に入れて、大に引数でキャッチするやり方と

var obs1 = Rx.Observable.throw(new Error('error'));
var obs2 = Rx.Observable.return(42);

var source = Rx.Observable.catch(obs1, obs2);

Promise chain見たいに連結するやり方の2通りある。

var source = Rx.Observable
  .throw(new Error())
  .catch(Rx.Observable.just(42));

中身はenumerableOf(items).catchError()してるだけ

throw

スケジューラー

  • Rx.Scheduler.currentThread

カレントスレッド上で全ての処理を行っていくスケジューラ。 コンカレントなキューを内部に持っていて、全ての操作は一度このキューに入れられてから一つずつ取り出して処理されます。 また、このスケジューラはSubscribeが使用しているので、どんな処理を書いても必ずこのスケジューラを通ります。

  • Rx.Scheduler.default

バックグラウンドスレッドをスケジューラの形に仕上げたものです。 内部に一つのスレッドかスレッドプールを用意して、各操作を処理していくものです。 連続する操作は一つのバックグラウンドスレッドでループ処理するように作られています。 なので、スレッドプールをフル活用して操作を並列処理していくスケジューラじゃないですよ!

  • Rx.Scheduler.immediate

操作のスケジューリングが行われた瞬間に割り込みで処理を走らせるスケジューラです。 内部に軽量なローカルスケジューラを持ち、最初のスケジューリングが行われた後は、全ての操作をローカルのキューを通して処理してから制御を戻します。 なので、超はやいです。

  • Rx.Scheduler.async

???

Texting

何者?

  • Rx.Promise
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment