JavaScript
RxJS

RxJS Observableの作成 (2)  Observable.from の使い方

More than 1 year has passed since last update.


用途

Observable.fromは、配列などのイテレータブルなオブジェクトやObservable、Promise等から新しいObservableを作成します。


基本的な使い方

Observableを作成する方法の一つとしてよく使用されるオペレーターです。

配列などのイテレータブルなオブジェクトからだけでなく別のObservableやPromiseから作成することが出来ます。

また、文字列を指定すると一文字づつ値を流すObservableを作成することが出来ます。

// 配列からObservableを作成

Rx.Observable.from([1,2,3]).subscribe(x => {
console.log(x);
});

// 結果
// 1
// 2
// 3

// 文字列からObservableを作成
Rx.Observable.from('foo').subscribe(x => {
console.log(x);
});

// 結果
// f
// o
// o

// PromiseからObservableを作成
Rx.Observable.from(new Promise((resolve, reject)=>{
setTimeout(resolve, 100, 'foo');
})).subscribe(x => {
console.log(x);
});

// 結果
// foo

ES6 stackblitz

TypeScript stackblitz


他のオペレーターとの組み合わせ


mapを使って税込み価格を取得

Rx.Observable.from([100, 250, 365])

.map((n) => {
return Math.floor(n * 1.08)
})
.subscribe(x => {
console.log(x);
}
);

// 結果
// 108
// 270
// 394


APIから取得したデータをmapを使って必要なデータのみ抜き出す。

APIからのデータの取得にはaxiosを使っています。

axios

github APIから「tom」を含んだユーザーを取得し、responseの中からユーザー情報(items)のみを抽出する。

Rx.Observable.from(axios.get('https://api.github.com/search/users?q=tom'))

.map(x => x.data.items)
.subscribe(res => {
console.log(res)
}
)

// 結果
// items[]

ES6 stackblitz

TypeScript stackblitz