RxJSをStorageの書き込みに使ってみた①
前回からの続きです。
RxJSの使い方を十分理解しているとは言いかねるので、まずはドメインをまたいだJSONPデータの取得の例から見ていきます。
------------------------------------------
//JSONP の取得テスト
let urlhoge = '外部ドメインのデータのアドレス';
let ObsebTest = this.http.jsonp(urlhoge, '');
ObsebTest.subscribe(this.observer_1);
//Subscribe内で動かす関数(と書きましたがよく考えるとJSONなので動作定義と言うべきもの？)
observer_1 = {
next: x => this.testJSON(x), //読み込み成功時
error: error => console.log('Observer1 got an error:'),//エラー時
complete: () => console.log('Observer1 got Complete'), //終了時
}; // データを受け取った時に何をするのかが書かれている
//読み込んだデータを内部変数にコピーする関数
testJSON(x:JSON){
this.fromJSONP=JSON.parse(JSON.stringify(x));
alert(this.fromJSONP["singleParameters"][1]["name"])
}
------------------------------------------
上の例では
・Observableオブジェクト"ObsebTest"を"this.http.jsonp(urlhoge, '')"として定義
(".http.jsonp"とあるが、この時点ではネットにアクセスしているわけでは無い)
・上で定義したObsebTestをsubscribe(this.observer_1)メソッドで動かす
・上の引数のobserver_1は非同期の胆になる部分で、成功・失敗・終了の3つの考えられる非同期の結果に従って行う処理を定義しています。
※この辺り、今日、色々見たおかげで誤解していたことがよく判りました。
(今でも理解は十分でないですが)
まずはStorageへの書き込みをObservableオブジェクトを使った方法に書き換えてみます。
・・・・・・・・・・・・・
実の所、試行錯誤しまくりなんですが、出来は良くないものの書き換え(の一例)自体は成功です。
---------------------------------------------------------------
import { Observable } from 'rxjs';
中略
const obs =new Observable((sub=>{
//sub.next()
//sub.complete()
//console.log(sub)
成功時の何らかの処理
}))
obs.subscribe(this.storage.set(キー, セットする値))
---------------------------------------------------------------
動くけれど、エラー処理は無いし色々おかしいコードです、いや本当に。
ただ、そこまでに至る試行錯誤は見せられるようなものじゃないので、ここをスタート地点にして何とかしてみたいと思います。
ま、現状の方法でも行けることは行けるようですがRxJSとやらにもう少し慣れてみたいと思います。
(見ていて気付きましたがAngularのデータバインディングとかも、この辺使ってるんでしょうね）
なお現在のセーブデータ保存のロジックは以下のように書いて有ります。
------------------------------------------
this.storage.set(キー, 値JSON)
.then((t)=>{ //保存成功時の処理
中略
})
.catch((err)=>{ //エラー時の処理
中略
});
------------------------------------------
これもWeb上のコードを見よう見まねで書いたモノなので理解が足りてないですね。
