HTML･CSS｜JavaScriptのPromiseで非同期処理を制御

JavaScriptの基本動作

基本的にJavaScriptはシングルスレッド動作する。

そうなると、JavaScriptは並行処理はできないということになる。

JavaScriptは登録されたコードが1つずつ順番に実行される。

しかし、登録される順番が同期、非同期が混在する。

データベース等に問い合わせている間（時間を要する処理）、その処理の終了を待たないで次へ進めるという便利な非同期処理が可能である。

この便利な機能がJavaScriptの動作の邪魔になることがある。

時には時間を要する処理の終了を待ってから動作させたい処理がある。

そのような制御を可能にする方法の1つとしてPromiseを使う方法がる。

順番に実行（同期）

console.log("step01");
console.log("step02");
console.log("step03");

step01
step02
step03

当然、順番に表示される。

では、真ん中の処理を少し時間が掛かるようにするとどうだろう？。

非同期

console.log("step01");
setTimeout(()   =>
{
    console.log("step02");
},100);
console.log("step03");

step01
step03
step02

step02を表示する関数をsettimeoutで後らしたら、先にstep03の表示が実行された。

step02の表示を待ってからstep03の表示をするには？。

Promiseの使い方

function    myFunc(delay,text)
{
    return  new Promise((resolve,reject)    =>
    {
        setTimeout(()   =>
        {
            console.log(text);
            resolve();
        },delay)
    })
}

myFunc(1000,"step01")
.then(function()
{
    return myFunc(100,"step02");
}).then(function()
{
    return myFunc(10,"step03");
});

step01
step02
step03

処理を遅延させても、思惑通り順番に処理された。