外部データ取り込み色々テスト中９ 外部データの取得(利用できる形で)成功！
さて外部データ(シナリオデータ読み込みを目標)の操作をテストします。
前に書いたimport環境確定は、個々でのテスト終わってからにします。
(どうせソースコードの汚れが予想されますので)
現時点では、
・ファイルを読むことは成功
・上の読み込みは非同期
という事までが確定です。
参考サイトとして書いただけの『RxJSの基礎中の基礎』の出番です。
https://qiita.com/agajo/items/7942743a0130f7a0f30b
外部データ取り込み色々テスト中４(RxJSを勉強中)
https://ncode.syosetu.com/n5283hn/133/
※割と下の方に
2018年04月24日に、RxJSのバージョン6.0.0がリリースされました。
RxJS 6.x以上では、この記事内にあるコードはそのままでは動かなくなっています。
と言う記述があるので注意
(更新の速さ、この辺がオープンソースソフトウェアのメリットにもデメリットにもなる所ですね)
以下の用語の概念は、読むとなんとなくわかりました。
・Observable
・Observer
・Subscribe
う～ん、
色々試していますがかなりてこずっています。
形としては
Observable.Subscribe(Observer関数)
と言う形で良さそうですが
まずObserver関数を以下のように定義しました。
------------------------------------------
//Subscribe内で動かす関数
observer_1 = {
next: x => console.log('Observer1 got a value: ' + x),
error: error => console.log('Observer1 got an error: ' + JSON.stringify(error)),
complete: () => console.log('Observer1 got Complete'),
}; // データを受け取った時に何をするのかが書かれている
------------------------------------------
そしてObservableを変数として、Subscribeメソッドで動かすと
let ObsebTest = this.http.jsonp(urlhoge, 'hogex');
ObsebTest.subscribe(this.observer_1)
以下のエラーが(observer_1のエラー時の定義の通りに)表示されます。
---------------------------------------------------------------
Observer1 got an error: {"headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"status":0,"statusText":"JSONP Error","url":"テストファイル名?hogex=ng_jsonp_callback_0","ok":false,"name":"HttpErrorResponse","message":"Http failure response for テストファイル名?hogex=ng_jsonp_callback_0: 0 JSONP Error","error":{}}
---------------------------------------------------------------
ファイルの中身を読み取り、それがjavascriptとして正しいならば、アラートなりconsole.logに出力なりは成功しますが、Observer関数に渡した結果はエラーのみ出力で処理につながりません。
色々調べていくと、"ng_jsonp_callback_0"で検索した結果に妙なサイトを発見。
中身は以下のようなのですが、これ、もしかしてこの問題の解決テストサンプル？
---------------------------------------------------------------
ng_jsonp_callback_0({"singleParameters":[{"name":"Status","type":"STRING","value":"OK"},{"name":"Description","type":"STRING","value":""}],"multipleParameters":[{"name":"CallReportInfo","singleParameters":[],"multipleParameters":[]},{"name":"CallReportWarn","singleParameters":[],"multipleParameters":[]},{"name":"CallReportError","singleParameters":[],"multipleParameters":[]},{"name":"DataOut","singleParameters":[{"name":"id","type":"STRING","value":"RICAVI"},{"name":"value","type":"x64","value":"eyJnd3RUdXBsYXMiOlt7InZhbHVlIjoi4oKsIiwidHlwZSI6IlNUUklORyIsIm9yZ0lzRm9ybXVsYSI6ZmFsc2UsImRhdGFUeXBlIjoiVHVwbGEiLCJsYW5ndWFnZSI6ImVuIiwiaWQiOiJVbml0cyJ9LHsidmFsdWUiOiIzMjIxLjU4NyIsInR5cGUiOiJOVU1CRVIiLCJvdXRwdXRGb3JtYXQiOiIjLCMjMC4wIiwic3JjQ2VsbEZvcm1hdCI6IiMsIyMwLjBfKTtbUmVkXVxcKCMsIyMwLjBcXCkiLCJvcmdJc0Zvcm11bGEiOnRydWUsImRhdGFUeXBlIjoiVHVwbGEiLCJsYW5ndWFnZSI6ImVuIiwiaWQiOiJWYWx1ZSJ9LHsidmFsdWUiOiJtbG4iLCJ0eXBlIjoiU1RSSU5HIiwib3JnSXNGb3JtdWxhIjpmYWxzZSwiZGF0YVR5cGUiOiJUdXBsYSIsImxhbmd1YWdlIjoiZW4iLCJpZCI6IlVuaXRzMiJ9LHsidmFsdWUiOiJSRVZFTlVFUyBpbiAyMDIxIiwidHlwZSI6IlNUUklORyIsIm9yZ0lzRm9ybXVsYSI6ZmFsc2UsImRhdGFUeXBlIjoiVHVwbGEiLCJsYW5ndWFnZSI6ImVuIiwiaWQiOiJEZXNjcmlwdGlvbiJ9LHsidmFsdWUiOiIgIiwidHlwZSI6IlNUUklORyIsIm9yZ0lzRm9ybXVsYSI6ZmFsc2UsImRhdGFUeXBlIjoiVHVwbGEiLCJsYW5ndWFnZSI6ImVuIiwiaWQiOiJEZXNjcmlwdGlvbjIifV0sImxldmVsIjoxLCJub3RlIjoiIiwidW5pdHMiOiLigqwiLCJzZWxlY3RhYmxlIjp0cnVlLCJyYW5nZUVuYWJsZWQiOmZhbHNlLCJyYW5nZU1pbiI6MC4wLCJyYW5nZU1heCI6MC4wLCJjc3NGb3JtYXQiOiJEQUctdGl0bGUiLCJoYXNDaGlsZHJlbiI6ZmFsc2UsImRhdGFUeXBlIjoiUm93IiwibGFuZ3VhZ2UiOiJlbiIsImlkIjoiUklDQVZJIn0\u003d"}],"multipleParameters":[]}]})
---------------------------------------------------------------
これを使ってテストするとデータ取得成功！(内部データに中身をコピーできました)
テスト環境の汚れたソースで恐縮ですが、以下に記載しますね。
外部テストデータ
---------------------------------------------------------------
ng_jsonp_callback_0({"singleParameters":[{"name":"Status","type":"STRING","value":"OK"},{"name":"Description","type":"STRING","value":""}]})
---------------------------------------------------------------
home.page.ts
---------------------------------------------------------------
hogex_0={}
constructor(private http: HttpClient) {
let urlhoge = '外部データアドレス'
let ObsebTest = this.http.jsonp(urlhoge, 'hogex');
ObsebTest.subscribe(this.observer_1)
}
observer_1 = {
next: x => this.testJSON(x),
error: error => console.log('Observer1 got an error: ' + JSON.stringify(error)),
complete: () => console.log('Observer1 got Complete'),
};
testJSON(x:JSON){//xはobserver_1 で取得したであろう外部データ
this.hogex_0=JSON.parse(JSON.stringify(x));//外部データを内部データにコピー
alert(this.hogex_0["singleParameters"][1]["name"])//内部データの一部をアラート表示
}
---------------------------------------------------------------
必要なimport等は、まだ調べていないのですが、大前進ですね！
追記：
割と本気で心配していましたが、実機での(デバッグモード)動作も確認取れました。
