12,504
回編集
差分
ナビゲーションに移動
検索に移動
→Promise
*Observable の subscribe() はエラーを処理します。Promise は子の Promise にエラーをプッシュします。
**Observable は集中管理され、予測可能なエラー処理に役立
===Observable===
*RxJsライブラリ
*https://angular.jp/guide/rx-library
リアクティブプログラミングは、データストリームと変更の伝播に関する非同期プログラミングのパラダイムです。
RxJS (Reactive Extensions for JavaScript) は、非同期またはコールバックベースのコード (RxJS Docs) の作成を容易にする
observables を使用したリアクティブプログラミング用のライブラリ
*非同期処理の既存のコードを observables に変換する
*ストリーム内の値を反復処理する
*異なる型への値のマッピング
*ストリームのフィルタリング
*複数のストリームの作成
===Observable 作成関数===
ベント、タイマー、promise などから observables を作成するプロセスを簡素化
====promise から observable を作成====
import { from } from 'rxjs';
// promise から Observable を作成
const data = from(fetch('/api/endpoint'));
// 非同期の結果の購読を開始
data.subscribe({
next(response) { console.log(response); },
error(err) { console.error('Error: ' + err); },
complete() { console.log('Completed'); }
});
====カウンターから observable を作成する====
import { interval } from 'rxjs';
// 一定間隔でで値を発行するObservable を作成
const secondsCounter = interval(1000);
// 発行される値の購読を開始
secondsCounter.subscribe(n =>
console.log(`It's been ${n} seconds since subscribing!`));
====イベントから observable を作成する====
import { fromEvent } from 'rxjs';
const el = document.getElementById('my-element');
// マウスの移動を発行する Observable の作成
const mouseMoves = fromEvent(el, 'mousemove');
// マウス移動イベントを購読開始
const subscription = mouseMoves.subscribe((evt: MouseEvent) => {
console.log(`Coords: ${evt.clientX} X ${evt.clientY}`);
// スクリーンの左端をマウスが越えたら購読中止
if (evt.clientX < 40 && evt.clientY < 40) {
subscription.unsubscribe();
}
});
====AJAX リクエストから observable を作成====
import { ajax } from 'rxjs/ajax';
// AJAXリクエストを生成する Observable の作成
const apiData = ajax('/api/data');
// リクエストの生成を購読
apiData.subscribe(res => console.log(res.status, res.response));
===Promise===
© 2006 矢木浩人
