外部データ取り込み色々テスト中３
さて、迷走していますがpromiseについて(私が)学んでいきたいと思います。
説明の分かりやすそうなサイトとサンプルとして役に立ちそうなサイトを下記に示します。
とほほのPromise入門
https://www.tohoho-web.com/ex/promise.html
PromiseによるJavaScript非同期処理レシピ集
https://sbfl.net/blog/2019/11/04/promise-cookbook/
Promiseとasync/awaitでJavaScriptの非同期処理をシンプルに記述する
https://sbfl.net/blog/2016/07/13/simplifying-async-code-with-promise-and-async-await/
二番目のサイトの最初の方の説明が(概念としても実際のコーディングのイメージとしても)判りやすかったので、引用させていただきます。
------------------------------------------
Promiseは状態を持つオブジェクトで、「処理中（pending）」「解決（fulfilled）」と「リジェクト（rejected）」の3状態を持ちます。何らかの処理が終わると解決し、処理中にエラーが発生するなどしたらリジェクトされます。
解決したPromiseはthenメソッドで受け取ることができ、リジェクトされたPromiseはcatchメソッドで受け取ることができます。解決しようとリジェクトしようと強制的に実行するfinallyメソッドもあります。
同期処理においてPromiseはあまり役に立ちませんが、非同期処理となると強い効果を発揮します。非同期処理は「いつ終わるかわからない」処理ともいえます。そういった処理の終了/エラーをトリガーに次の処理に移れるのは、非常に便利です。
------------------------------------------
非同期(ネットのどこかからデータを持ってくるのも非同期ですね)の処理を行う時に、心強そうな方法なわけですね。
とりあえず、ちょっとずつテストコードを書いていき、最終的には外部サイトのJSONデータを扱える機能をionicプロジェクトで実現するのが目標になります。(リアルタイムでテストしています。つまり現在進行形の話なので目標に到達するかの保証はありません。失敗も含めて記録を書いていきます。)
四苦八苦は大袈裟ですが、サンプルがjavascriptという事も有り、微妙にシンタックスエラー(書き方の上でのエラー)が出ましたが、なんとかごくごく簡単なコードは動きました。
---------------------------------------------------------------
//test promise(ionViewDidEnter()内に記述)
const promise = new Promise<void>((resolve, reject) => resolve()); // Promiseを作成し、終了する
promise.then(() => console.log('done!')); // Promiseが終了したら「done!」と表示する
---------------------------------------------------------------
ちなみに戻り値<void>(何も無いという値)の追加が必要でした。
次は非同期のコードです。
------------------------------------------
const promise = new Promise<void>((resolve, reject) => {
setTimeout(() => {
console.log('hello : %s' , Date());
resolve();
}, 5000);
});
console.log('時は春、日は明日 : ' + Date());
promise.then(() => console.log('world! : ' + Date()));
------------------------------------------
意図通り、console.logには次の順序で表示されています。(非同期になっていますね)
時は春、日は明日 : Sun Jul 24 2022 09:45:50 GMT+0900 (日本標準時)
hello : Sun Jul 24 2022 09:45:55 GMT+0900 (日本標準時)
world! : Sun Jul 24 2022 09:45:55 GMT+0900 (日本標準時)
アロー関数と言うのも、慣れていないですが多少判ってきた気がします。
アロー関数
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions
ちょっと脱線します。
プログラム等に縁がない方は、プログラム言語だとかIT技術とか完成していないかもしれないけれど堅固なものと思っていらっしゃるかもしれません。
私の印象ではむしろあやふやで、どんどん変化するスライムのような印象を持っています。
成長や変化が止まり成熟化するか、ちょっと自信ないですね。
閑話休題
う～ん、まったくわからない。
確かに、AngularにはJSONPを受け取るための機能はあるようだけど使い方が判らない。
node_modules\@angular\common\http\index.d.ts
かなり長引きそうです・・・
