JavaScript
初心者

async/await 使ってみる

大雑把にどんなもの?

async/awaitはこんな感じです。

波動拳 → Promise → async/await

少し詳しく

1行目: 関数宣言時にasyncをつけてやると準備完了です (ES7の機能なのでyarn addとかは別途必要です
3行目: Promiseを返す関数(非同期処理)を呼び出す際に先頭にawaitをつけてやると同期的に処理を待つことが出来ます
7行目: async/awaitは途中で処理を抜けることができるので使い勝手がPromiseより高いです

18, 19行目: async/awaitの関数の返り値はPromiseで包まれます。

13行目: Demo関数の中で実行する関数がPromiseのrejectで解決する場合はtry/catchで拾うことが出来ます。

async function Demo() {
  try {
    const registration1 = await navigator.serviceWorker.ready; // awaitをつけると同期的にまつ
    const registration2 = navigator.serviceWorker.ready; // awaitをつけないと非同期的

    if (registration1 === null) {
      return 'result1'; // 途中で処理を抜けることができる
    }

   // ~~~ なんか処理 ~~~

   return 'result2';
  } catch (e) {
    throw new Error(`faile Demo: ${e}`);
  }
}

const demoRes = Demo(); // 返り値はPromiseでラップされている
demoRes.then((res) => console.log(res)); // result2      (result2のreturnで解決していた場合