Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
9
Help us understand the problem. What is going on with this article?

More than 5 years have passed since last update.

@bouzuya

RxJS の Operators (7) - Observable Utility Operators (1)

この記事は bouzuya's RxJS Advent Calendar 2015 の 9 日目かつ RxJS Advent Calendar 2015 の 9 日目です。

はじめに

今日は ReactiveX の Observable Utility Operators について RxJS の API ドキュメントやサンプルコードを書いていきます。

また RxJS 4.0.7 を対象にしています。

Observable Utility Operators

Observable.prototype.subscribe

リスト上は subscribe が挙げられていますが、もう特に書くことはないので割愛します。

Observable.prototype.subscribeOn

指定した scheduler に従って値を流すようにします。

import { Observable, Scheduler } from 'rx';

Observable
  .from([1, 2, 3])
  .subscribeOn(Scheduler.default)
  .subscribe(
    value => console.log(`onNext: ${value}`),
    error => console.log(`onError: ${error}`),
    () => console.log('onCompleted')
  );
console.log('start');
// start
// onNext: 1
// onNext: 2
// onNext: 3
// onCompleted

ただ immediate (同期的) -> default (非同期) はともかく、当然、その逆はできません。一度 default にすると immediate に戻すこともできません。

またドキュメントでは Scheduler.timeout になっていますが、このメソッドは既に削除されており Scheduler.default に名前が変更されています。(Scheduler.default がデフォルトじゃない Scheduler.immediate なのもよく分かりません)

Observable.prototype.do

do は副作用を前提としたオペレーター。 do の戻り値に関係なく流れてきた値は次に流れます。 subscribe と同様のシグネチャを持つので、Observer を指定せずに onNext などを直接指定できます。

import { Observable } from 'rx';

Observable
  .from([1, 2, 3, 4])
  .do(value => console.log(`do: ${value}`))
  .filter(value => value % 2 === 0)
  .subscribe(
    value => console.log(`onNext: ${value}`),
    error => console.log(`onError: ${error}`),
    () => console.log('onCompleted')
  );
// do: 1
// do: 2
// onNext: 2
// do: 3
// do: 4
// onNext: 4
// onCompleted

デバッグの際に流れる値を確認するのに便利かもしれません。

Observable.prototype.delay

delay は遅らせて値を流します。絶対時間 (Date) や相対時間 (ms) や Observable での指定などができます。

import { Observable } from 'rx';

Observable
  .from([1, 2, 3])
  .delay(1000)
  .subscribe(
    value => console.log(`onNext: ${value}`),
    error => console.log(`onError: ${error}`),
    () => console.log(`e ${new Date().getTime()}`)
  );
console.log(`s ${new Date().getTime()}`);
// s 1449639923044
// onNext: 1
// onNext: 2
// onNext: 3
// e 1449639924038

当然、非同期になります。

おわりに

今日は Observable のユーティリティを見ました。まだ途中なので続きは明日にします。

9
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
9
Help us understand the problem. What is going on with this article?