非同期処理で JavaScript / Basic / Promise が出てきたが、さらに async と await というモノが出てきた。これはなんなのか。

これは関数宣言につけるオプションみたいなもので、非同期的な機構を自動的に組み込んでくれる記法にになる。 このように書く。

async function hoge(){
}

これだけで非同期機構が組み込まれたようで。何も return しなかった場合、単純に promise が戻る。

つまりこれは Promise の定番記述である以下の記述と同様になる。

function hoge(){
    return new Promise(function(resolve, reject){
        resolve();
    });
}

await は関数の実行時につける実行のための修飾記述。 Promise を返す関数を await 付きで実行した場合、その Promise が内包する処理の終了を待ってくれる。

getHoge が Promise を返す非同期的処理の場合 hoge が戻る前に console.log へ進んでしまうので処理がおかしくなる。

var hoge = getHoge();
console.log(hoge);

そしてそもそも hoge 自体が Promise である。

このようにすると処理待ちをしてくれてなおかつ resolve の return を返してくれる

var hoge = await getHoge();
console.log(hoge);

つまり Promise 系の非同期関数を同期的に使うことが出来るようになる。

制約として await は async で作られた関数内でしか使うことが出来ない。 つまり非同期処理を待つには関数全体を非同期処理にしなければならず、その関数を同期的に実行するには await が必要になり await をつけるには async が必要になり・・・ということで、単純に一部だけを同期処理にすることには使えない。

async は単なる関数に定形のPromise系の非同期処理を組み込むショートカット記述。

await は async で組み込まれた Promise系非同期処理を同期的に呼び出す。 しかも、resolve での結果をあたかも return してるかのようにしてくれる。