JavaScript asyncとawaitのサンプル

JavaScript asyncとawaitのサンプルです。

サンプル	asyncとawaitとは
	Promiseを使用したサンプル
	asyncを使用+resolved(解決した)を返す
	asyncを使用+rejected(却下された)を返す
	awaitで処理を制御する

asyncとawaitとは

asyncを関数名の前につけるとその関数はPromiseを返すようになります。
throwで例外を投げるとrejectedになります。例外がなければfulfilledです。
awaitは、Promiseがfulfilled(成功)またはrejected(失敗)になるまで処理を待ちます。
awaitは、asyncが付けられた関数内でのみ実行できます。
以下は、MDNの非同期関数のリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function

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行目の文字列が出力されています。