RxJS の zip を詳しく見る

RxJS は、JavaScirpt でリアクティブ・プログラミングを行うライブラリであり、非同期処理やタイマー処理、イベント駆動の処理を簡潔かつ可読性高くコーディング出来きます。

zip

RxJS の zip は、複数の Observable を受け取り、それらを組み合わせた Observable を返す operator です。

簡単なサンプルコード

とにかく、zip を使ってみましょう。

次の例は、それぞれ 3つの値のリストを持つ Observable を、zip で組み合わせるサンプルコードだ。

import { of, zip } from 'rxjs';

const src1 = of(1, 2, 3);
const src2 = of(4, 5, 6);

zip(src1, src2).subscribe(console.log);

実行結果は次のとおり。

2つのリストの値が組み合わせた配列が、subscribe に渡される。

[1, 4]
[2, 5]
[3, 6]

zip を色々ためす

３つの Observable

zip は、複数の Observable を受け取るため、3 つ以上の Observable を渡すこともできる。

const src1 = of(1, 2, 3);
const src2 = of(4, 5, 6);
const src3 = of(7, 8, 9);

zip(src1, src2, src3).subscribe(console.log);

上のコードを実行すると、こんな感じに 3つの Observable が組み合わされた配列が subscribe に渡される。

[1, 4, 7]
[2, 5, 8]
[3, 6, 9]

リストの数が違うとき

zip は、複数の Observable を受け取り、それらを組み合わせた Observable を返すが、リストの数が違う Observable を渡した時は、どうなるのだろうか？

実際に、リストの数が違う Observable を 2つ zip に渡してみる。

const src1 = of(1, 2, 3);
const src2 = of(4, 5);

zip(src1, src2).subscribe({
  next: (x) => console.log(x),
  complete: () => console.log('complete'),
});

実行すると、要素数が一致する部分までが組み合わせられ、一致しない部分（この例では src1 の 3要素目）は捨てられ complete が呼ばれる。

[1, 4]
[2, 5]
complete

つまり zip は、渡された複数の Observable から、いずれかのソースがなくなるまで、next で値を取り出し、どれか１つでも値がなくって complete になった時点で zip の流れも止まるオペレーターといった感じだろう。

ajax と zip

ajax と zip を組み合わせると、複数の API 呼び出しの待ち合わせなどに使える。

例えば、つぎのようなコードを書くことで、ajax1 と ajax2 の非同期通信が完了するまで待ち合わせて、subscribe で２つのレスポンスを使って処理を行うといったことが可能になる。

import { zip } from 'rxjs';
import { ajax } from 'rxjs/ajax';

const ajax1 = ajax(`https://api.github.com/users?per_page=1`);
const ajax2 = ajax(`https://api.github.com/404`);

zip(ajax1, ajax2)
  .subscribe((res) => console.log(res));

エラーハンドリングしたい時は、error を使えばよいが、注意点としては、複数の ajax 処理でエラーになった時でも、error は最初に発生したエラーしか呼ばれない。

zip(ajax1, ajax2).subscribe({
  next: (res) => console.log(res),
  error: (err) => console.log(err)
});