async / awaitをざっくり理解する

はじめに

前回に続き、今回はasync / awaitについてざっくり書いてみます。
最初に言っておきますが・・・

本当にざっくりです！！

対象者

JavaScript初学者、いまいちPromiseやasync / awaitがわからない人向けです。
非同期、同期処理について詳しく知りたい方は回れ右して下さい。

Promiseについてざっくり知りたい人は前回の記事を読んでみてください。

それでは書いていきます。

async / awaitとは

簡単に言ってしまうと、非同期処理を同期っぽく書くことができる魔法のコトバです。

asyncはPromiseを返し、awaitはPromiseの処理を待ち展開します。
以下のコードを実行してみてください。

console.log((async() => {return "AsyncFuncTest";})());

結果は以下のようになるはずです。

Promise { 'AsyncFuncTest' }

asyncがPromiseを返していることがわかると思います。

一方で、awaitはPromiseを待ち、展開します。 まずは以下のコードを実行してみてください。

const asyncFuncTest = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {resolve("3秒経過");}, 3000);
    });
};

const asyncFuncTest2 = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {resolve("5秒経過");}, 2000);
    });
};

(() => {
    console.log(asyncFuncTest());
    console.log(asyncFuncTest2());
})();

実行結果はこのようになると思います。

Promise { <pending> }
Promise { <pending> }

「3秒経過」も「5秒経過」も出力されることなく、
また、setTimeoutも利かず実行後パッと結果が出力されたことと思います。

では、Promiseを待ち、展開するawaitをつけて実行してみましょう。
ちなみにawaitはasyncの中でしか実行することができません。

asyncはアロー関数やfunctionの前につけて使用します。

const asyncFuncTest = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {resolve("3秒経過");}, 3000);
    });
};

const asyncFuncTest2 = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {resolve("5秒経過");}, 2000);
    });
};

(async() => {
    console.log(await asyncFuncTest());
    console.log(await asyncFuncTest2());
})();

実行結果を見てみると
順番通り「3秒経過」「5秒経過」と出力されたと思います。

この様に、awaitはPromiseを待ち、展開し同期っぽく実行できることがわかると思います。
Promiseで言うところの.thenみたいな役割ですね。

asyncはPromise、awaitはresolve、thenみたいな感じだと考えておけば充分だと思います。

これらをうまく組み合わせコーディングすることで、
コールバック地獄になってしまいがちなややこしい非同期処理も
同期っぽい処理になり直感的且つ簡潔に書くことができます。

いかがだったでしょうか？
もっと詳しく知りたい方は、
先人の方々が書かれているブログなども見ていただければよいのですが
ざっくり理解して実際に使ってみたい方には丁度いい内容になっていれば幸いです。