async と await のまとめ（apiを後回しにするパターン例）

async と await を使うとき、よくあるのが、apiを後回しにするパターンだと思う。

たとえば、下記のようなことがやりたいとする。

1.api以外の処理をする
2.画面を表示
3.apiで値をとってくる
4.とってきた値をいい感じに変更したりする
5.画面に反映

もしこれを順番に書いてしまうと、こうなる。

apiが終わるまで画面が表示できない。。

node.js

let tmp1 = sample()
console.log(tmp1)

let tmp2 = samAsync()
console.log(tmp2)

console.log("画面表示！！")



function sample(){//api以外の処理
    return "api以外の処理"
}

function samAsync(){//apiの値を操作する処理
    console.log(samAwait())
    return "apiの値を操作する処理（画面に反映）"
}

function samAwait(){//apiの処理
    return "apiの処理"
}

//実行結果

//api以外の処理
//apiの処理
//apiの値を操作する処理（画面に反映）
//画面表示！！

async await を使うと。

そこで、async awaitを使って、順番をいい感じに変えることができる。
結果はこんな感じ。

node.js

let tmp = sample()
console.log(tmp)

samAsync().then(value => {
    console.log(value)
})

console.log("画面表示！！")

function sample(){//api以外の処理
    return "api以外の処理"
}

async function samAsync(){//apiの値を操作する処理
    await samAwait().then(value => {
        console.log(value)
    })
    return "apiの値を操作する処理（画面に反映）"
}

async function samAwait(){//apiの処理
    return "apiの処理"
}



//実行結果

//api以外の処理
//画面表示！！
//apiの処理
//apiの値を操作する処理（画面に反映）