非同期処理を会社組織に例えて説明する。 #JavaScript

単純なindex.html

<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <script src="main.js"> </script>
</head>
<body>
    <input type="number" id="suuji"  maxlength="4"/>
    <button onclick="bushoA()";>送信</button>
</body>
</html>

そして、単純なmain.js

function bushoA() {
    var suuji = document.getElementById("suuji").value;
    var suuji =  Number(suuji)
    // 社員A
    suuji =  suuji  + 1;
    console.log( "shainA " ,suuji);
    // 社員B
    suuji = suuji + 2
    console.log("shainB",suuji)
}

部署Aでの流れです。
社員Aは入力された数値に１を足し
社員Bはそれに２を足すという、単純な流れ作業

部署Aの部長は言いました
「Aくん、これからネットワーク経由で数字を足してもらう事になるから、時間のかかる処理になってもいいように準備しておいてね！」
社員A「わかりました、処理に10秒かけるようにしておきます」

社員Aが以下のように準備しました。

setTimeout(() => {
   // 社員A
    suuji =  suuji  + 1;
    console.log( "shainA " ,suuji);
}, 1000);

ところが、社員Bからなにやら報告が・・・
「なんかAの処理を変えてから結果がおかしいんです」

すると部長
「あ、そうだった。Aは時間のかかる処理をやっているから、その結果を返す前にBが処理しちゃったらおかしくなるわ」
社員B
「どうしましょうか？」
部長
「Aの処理を非同期処理にするわ」
社員B
「は？非同期処理？？」
部長
「流れに乗れない処理の宣言の事だよ、Aは成功か失敗か返すから、成功した時にBの処理を行えばいいよ」
「Aくん、非同期にしておいてね」
社員A
「あっ、うっかり忘れていました、Bの処理はthenに記述しておくようにしておきます」

こうしてできたのが以下のコードになります。

function bushoA() {
    var suuji = document.getElementById("suuji").value;
    var suuji =  Number(suuji)
    new Promise(resolve=>{
        setTimeout( () => {
            // 社員A
            suuji = suuji  + 1;
            console.log( "shainA " ,suuji);
            resolve()
        }, 1000); 
    })
    .then(()=>{
        // 社員B
        suuji = suuji + 2
        console.log("shainB",suuji)
    })
    .catch(err => {
        console.log(err)
    })
}

こうして無事に社員Aの後に、結果を変えずに社員Bの処理ができるようになりました。

次回は「async await」について説明しようと思いますが、なかなか例えが難しいですね。