JavaScriptの面倒くさいところに同期処理が面倒くさいというのがある。

ある処理が終了した後はコールバック関数が非同期で呼ばれるというのがよくあり、ちょっと色々かくとコールバック地獄になる

非同期で動く例

axiosというライブラリを使って、このブログにアクセスするコードを書いてみる。

const axios = require('axios');

const main = ()=>{
    axios.get("https://glorificatio.org/").then(res=>{
        //HTTP ステータスを表示（何もなければ200）
        console.log(res.status);
    });
    console.log("終了");
}

main();

こういうコードの場合、
ウェブページにアクセスする処理をお願いしたら、main関数の処理は先に進み、
先に”終了”という文字を表示させて、
その後にウェブページからのリクエストが帰ってきてHTTPステータスが表示される

なのでこのような表示結果になる
終了
200

async awaitを使って同期をとる

簡単な使い方を説明する

• .then()で非同期処理になる関数を呼び出す時に、awaitをつける
• 戻り値がthenに渡すコールバック関数の引数と同じになる
• awaitが使われる関数にasyncをつける

const axios = require('axios');

const main = async ()=>{
    let res = await axios.get("https://glorificatio.org/")
    console.log(res.status)
    console.log("終了");
}

main();

これでawaitを付けたところ、すなわちaxiosの処理が終わるまでmain関数の処理を待っててくれる

処理結果はさっきとは順番が変わって、ソースコード上の順番になっていて、とてもわかり易くなっている。

処理結果は以下の通り
200
終了

非同期処理を作る

async awaitは非同期処理をする関数がもともとあって、それを同期処理にしたい場合につかう。

逆に、非同期処理を手で作ってみる場合はどうするのか。
さっそくなので作ってみる。
1秒ほどかかってようやく計算をするというメソッドで、
しかもマイナス値だとエラーになるという仕様だ

//非同期な処理をする関数
const osoiProc = (n) =>{
    
    //非同期したい処理はPromiseでくるむ感じ
    return new Promise((resolve,reject) =>{
        let a = 3 * n;
        //時間が遅くなっているのはサンプル的にsetTimeoutで再現
        setTimeout(()=>{
            if(a <= 0) {
                //エラーにしたい場合はrejectに結果を渡す
                reject(a + "はマイナスの数");
            }else {
                //普通の場合はresolveに結果を渡す
                resolve(a);
            }
        },1000)
    });
}

const main =  ()=>{
    osoiProc(5).then(res=>{
        console.log(res);
    }).catch(err=>{
        console.log(err);
    });

    osoiProc(-5).then(res=>{
        console.log(res);
    }).catch(err=>{
        console.log(err);
    });
    console.log("終了");
}

main();

osoiProcが非同期処理の例
Promiseを使っている。

Promiseを使うと、axiosのようにthen等でコールバックを設定し、非同期処理ができる

このコードの場合の結果は以下のようになる
終了
15
-15はマイナスの数

自前の非同期処理でもasync await

promiseを使った非同期処理を呼び出すときにawaitをつければ同じ様に同期処理になる

//非同期な処理をする関数
const osoiProc = (n) =>{
    
    //非同期したい処理はPromiseでくるむ感じ
    return new Promise((resolve,reject) =>{
        let a = 3 * n;
        //時間が遅くなっているのはサンプル的にsetTimeoutで再現
        setTimeout(()=>{
            if(a <= 0) {
                //エラーにしたい場合はrejectに結果を渡す
                reject(a + "はマイナスの数");
            }else {
                //普通の場合はresolveに結果を渡す
                resolve(a);
            }
        },1000)
    });
}

const main =  async ()=>{
    try{
        let res = await osoiProc(5)
        console.log(res);
    }catch(err) {
        console.log("キャッチされた",err);
    }

    try{
        let res = await osoiProc(-5)
        console.log(res);
    }catch(err) {
        console.log("キャッチされた",err);
    }

    console.log("終了")
}

main();

osoiProcは変更なく、呼び出している方が変わる

then()に渡すコールバック関数で取得できる引数は、await付きのメソッドから返される戻り地になる。
エラー時に呼び出されるcatch()のコールバック関数に相当するのは
普通のtry catch構文で対応できるようになっている。

実行結果はこのようになる
15
キャッチされた -15はマイナスの数
終了

コールバックがなくなり、非常にわかりやすい処理になる。

まとめ

• thenで非同期になっている関数を同期したい場合は、呼び出し時にawaitをつける
• awaitが登場する関数にasyncをつける
• 非同期で処理される関数には特に変更を加えることはない