async（非同期処理）

関数の前に「async」を付ける事で、非同期の関数になります。

そもそも、非同期とは順番を待たずに後ろで処理をしておくという状態です。

非同期にする事で、APIなど裏で実施したい内容を実行する事ができます。

以下、非同期のサンプルコードです。

※無名関数を使用して、シンプルに記載しています。

<script>
    (async () => {
        // ここが非同期処理です。
        console.log('非同期処理');
    })()
</script>

await（同期処理）

非同期処理の中で、画面の表示を変えたいなど同期的に処理を行いたい場合があります。 その際には、明示的に同期処理を実行することが出来ます。 処理の左に「await」を付ける事で、同期処理になります。

以下、同期処理のサンプルコードです。

※無名関数を使用して、シンプルに記載しています。

<script>
    (async () => {
        // 以下が同期処理です。
        await console.log('同期処理');
    })()
</script>

非同期処理と同期処理まとめ

まずはソースコードの全量

「await」の右の処理は、１秒止める処理だと思ってください。

<script>
    console.log('ログ1');
    (async () => {
        console.log('ログ2');
        await new Promise(resolve => setTimeout(resolve, 1000))
        console.log('ログ3');
    })()
    console.log('ログ4');
</script>

コンソールには、以下の様な順番でログが出力されると思うかもしれません。

ログ1
ログ2
ログ3
ログ4

しかし、非同期にしている事で、以下の様な順番でログが出力されます。

ログ1
ログ2
ログ4
ログ3