RxJSを使い、配列のデータを1件ずつ待ちを挟みながら処理していく。

javascript TypeScript RxJS

前回の記事をRxJSを使って書き直したような感じの内容。 前回との違いは元になるデータが配列ってところくらい。

private messages = [];
private messageArray = [{message: 'テストメッセージ1'}, {message: 'テストメッセージ2'}]
const delayObservable = Rx.Observable.empty().delay(1000); // 1秒待ちを入れるobservableを作っておく
let messageObservable = Rx.Observable.from(this.messageArray)
    .concatMap(msg => {
        return Rx.Observable.empty().concat(delayObservable).concat(Rx.Observable.of(msg)); // 1秒のディレイを挟みつつ、メッセージをsubscribeのコールバックへ流す
    });

const initMessageSubscription = messageObservable.subscribe(
    (msg) => {
        this.messages.push(msg); // メッセージを順次処理する
    },
    (err) => {
        console.error(err);
    },
    () => {
        initMessageSubscription.unsubscribe(); // 終わったらunsubscribeする。
    }
);

cyubachi.hatenablog.com