JavaScript Promiseをわかりやすくするasyncとawait

asyncとawaitとは

asyncとawaitは、非同期処理（Promise）を、あたかも同期処理（上から順番に実行されるコード）であるかのように、読みやすく、書きやすくするための仕組みです。

Promiseを簡単に扱うための「シンタックスシュガー（糖衣構文）」とも呼ばれます。

async	asyncキーワードが付いた関数は、必ずPromiseを返します。関数内で値をreturnすると、それは自動的に解決済みのPromise（Promise.resolve(値)）としてラップされます。
await	Promiseの結果が出るまで、その行の処理を一時停止（待機）するために使います。 async関数の中でしか使用できません。 awaitの後に書かれたPromiseが解決（成功または失敗）されるまで、次の行のコードの実行をブロックします。 Promiseが成功したら、その結果の値を取り出してくれます。

Promiseを使用したサンプル

<script>
  function test1() {
    return new Promise((resolve) => {
      resolve("OK");
    });
  }
  test1()
    .then((str1) => {
      console.log(str1); // OKが出力される
  });
</script>

処理の流れは、7行目から2行目の関数が実行された後に8行目以下が実行されます。

3行目は、Promiseの前にnewがありPromiseオブジェクトを生成しています。
更にその前にreturnがあるので生成されたPromiseオブジェクトを返します。
4行目は、resolveがあるのでPromiseオブジェクトはfulfilled(成功)の状態です。

resolvedの時は8行目のようにthenで受ける必要があります。

asyncを使用+resolved(解決した)を返す

上記のPromiseのコードをasyncを使用したコードに書き換えました。

<script>
  async function test1() {
    return "ok";
  }
  test1()
    .then((str1) => {
      console.log(str1); // OKが出力される
  });
</script>

2行目にasyncがあります。
この場合、メソッドの呼び出し元にPromiseはfulfilled(成功)の状態で渡されます。
new Promiseもresolveもありませんが、8行目のようにthenで受けれます。

asyncを使用+rejected(却下された)を返す

<script>
  async function test1() {
    throw new Error("NG");
  }
  test1()
    .then((str1) => {
      console.log("OK"); //出力されない
    })
    .catch((str1) => {
      console.log(str1); // NGが出力される
    });
</script>

2行目にasyncがあります。
3行目は、throw文で例外をスローしています。
この場合、メソッドの呼び出し元にPromiseはrejected(失敗)の状態で渡されます。
9行目のcatchで受けて文字列が出力されます。

awaitで処理を制御する

<script>
  async function test1() {
    console.log("a");
    await test2();
    console.log("b");
    return "ok";
  }
  function test2() {
    return new Promise((resolve) => {
      setTimeout(() => {
        console.log("test2");
        resolve();
      }, 1000);
    });
  }
  test1()
    .then((str1) => {
      console.log(str1); // 
    })
    .catch((str1) => {
      console.log(str1); //
    });
</script>

4行目は、awaitがあります。呼び先のtest2関数は、settimeoutで1秒待つ設定です。
awaitは、9行目のPromiseの結果を受けるまで待つので処理としては、3,4,5行目と順に実行されます。
4行目のawaitがない場合は、test2関数のsettimeoutで1秒待っている間に、3,5行目が終了し、そのあとに4行目の文字列が出力されます。

以下はawaitがあるときのイメージ図です。3,4,5行目の順に文字列が出力されます。

以下は、awaitがないときのイメージ図です。3,5行目と呼び出し元で文字列が出力された後、4行目の文字列が出力されています。