ノンプログラマーがjavascript promiseを勉強してみた 後編

ノンプログラマーがjavascript promiseを勉強してみた 後編

こんばんわ、taisonです。

さて、本日は前回の記事の続きであるjavascript promiseのコードを実際に書いていこうと思います。

Promiseコードを書いてみる

手始めにMDNのサンプルコードを紐解いてみます。
リンク先のページではコードを動かすスペースが記事の先頭にあるので、コードをコピペしてスペースに入力すると実際の動きを確認することが出来ます。
いろいろと試して動きを確認してみましょう。

それでは始めていきます。

以下では、最初の関数に時間を指定して、処理を待機させるようにします。
その下にあるコールバック関数(.thenが付いてるやつ)で状態付与、上の関数で状態判定されたら表示反映させることができます。
(先の記事で触れた非同期処理です)


let myFirstPromise = new Promise((resolve, reject) => {
  setTimeout(function(){
    resolve("成功!");
  }, 250);
});

myFirstPromise.then((successMessage) => {
  console.log("これは " + successMessage);
});

//出力結果 "これは成功!" 上にある関数に時間が設定されているので、先に下の処理が実行され、上記処理が完了したら引数に値を付与する

いやあ。
動くとなんか出来た気になっちゃいますね 笑

いかんいかん、油断せず勉強しせねば。

Promiseコードの応用例

続いてそのまま応用例もやってみましょう。

 

See the Pen GxjvWM by taison (@takatsugusuzuki) on CodePen.

ボタンをクリックするたび、testPromise()の処理が呼び出されます。


// 出力用のボタンhtml
<button id="btn">Make a promise!</button>
<div id="log"></div>

 

出力用のボタンhtmlに対して、下記の処理を適用していきます。


'use strict';
var promiseCount = 0;//カウント用の数字
 
function testPromise() {
    let thisPromiseCount = ++promiseCount;
 
    let log = document.getElementById('log');
    log.insertAdjacentHTML('beforeend', thisPromiseCount + ') 開始 (同期処理開始)');
 
    let p1 = new Promise(//新しいPromiseを作成
       (resolve, reject) => {
            log.insertAdjacentHTML('beforeend', thisPromiseCount + ') Promise 開始 (非同期処理開始) ');
 
            window.setTimeout(
                function() {
 
                    resolve(thisPromiseCount);
                }, Math.random() * 2000 + 1000);//1~3秒後に結果を返す設定
        }
    );
//以下はPromiseが成功(then)・失敗(catch)した時の挙動を指定
    p1.then(
        function(val) {
            log.insertAdjacentHTML('beforeend', val + ') Promise 成功 (非同期処理終了) ');
        })//メッセージと値を記録
    .catch(
       (reason) => {
            console.log('Handle rejected promise ('+reason+') here.');
        });//失敗の理由を記録
 
    log.insertAdjacentHTML('beforeend', thisPromiseCount + ') Promise 作成 (同期処理終了) ');
}if ("Promise" in window) {
  let btn = document.getElementById("btn");
  btn.addEventListener("click",testPromise);
} else {
  log = document.getElementById('log');
  log.innerHTML = "Live example not available as your browser doesn't support the Promise interface.";
}

流れを書くと、
まず普通にjavascriptの処理を開始して、続いて非同期処理用のPromiseオブジェクトを作成します。

次に時間指定で遅らせる非同期処理用の関数を作成し、最後に同期終了時点の処理を書いて完了。

結果としては、
ボタンを押した段階で3つの処理が完了(非同期処理終了以外)し、時間指定していた処理が結果の取得が完了した段階で出力されます(非同期処理終了)。

ボタンを連打するとちょっと面白い出力結果が見えますので、お試しあれ。

実務で使えるようにだんだんPromiseを掘り下げていきましょう

まとめるとpromiseがpwaで使用されているのは、正否の判定処理を分かりやすくコーディングするために使用している。といった感じでしょうか。setTimeoutなんか実際は使われてなかったですし。遅延させる意味もないでしょうし。

とにかくこれでチュートリアル的な部分はなんとか解決できました。が、実務で使うとなると色んなAPIや関連する技術を勉強しないと厳しい気がします。

おごらずここから掘り下げて勉強して、気持ちよくjavascriptを使用したいものです。
pwa使用の道のりはまだまだ遠い、、、

それではまた!

javascriptカテゴリの最新記事