[JavaScript] async/awaiの使い方

JavaScriptには、非同期プログラミングを行うための機能として、コールバック、Promise、そしてasync/awaitがあります。今回は、JavaScriptのasync/await構文について、そのメリットとデメリットを解説していきます。

目次

async/awaitとは

async/awaitは、ES2017で導入された非同期プログラミングを簡単に行うための構文です。async/awaitは、Promiseの上に構築されています。asyncは、非同期関数を定義するためのキーワードで、awaitは、Promiseが解決されるまで、非同期処理の実行を一時停止するキーワードです。

async/awaitのメリット・デメリットは以下のページにまとめました。

async/awaitの基本的な使い方

async/await構文を使うには、関数にasyncキーワードを付ける必要があります。そして、awaitキーワードを使って、Promiseの結果を取得することができます。awaitキーワードを使うことで、Promiseがresolve(成功)するまで、その行で処理が停止されます。そして、resolveされたPromiseの値を返します。

以下に例を示します。ここでは、非同期処理であるsetTimeoutを使って、2秒後にメッセージを表示する関数を定義しています。

function waitTwoSeconds() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('2秒経過しました!');
    }, 2000);
  });
}

この関数をPromiseを使って実行すると、以下のようになります。

waitTwoSeconds().then((result) => {
  console.log(result); // '2秒経過しました!'
});

次に、async/awaitを使って同じ処理を行う場合を見てみましょう。

async function waitTwoSecondsAsync() {
  const result = await waitTwoSeconds();
  console.log(result); // '2秒経過しました!'
}

上記のコードでは、waitTwoSecondsAsync関数がasyncキーワードで定義されています。そして、awaitキーワードを使ってwaitTwoSeconds関数の処理が完了するまで待ち、その結果を変数resultに代入しています。そして、resultの値をコンソールに表示しています。

このように、async/await構文を使うことで、コードが読みやすくなり、非同期処理の結果を簡単に操作することができます。

async/awaitで複数の非同期処理を実行する方法

async/await構文を使うことで、複数の非同期処理を簡単に実行することが

できます。複数の非同期処理を実行する場合、Promise.allメソッドを使うことができます。Promise.allメソッドは、複数のPromiseを受け取り、全てのPromiseの処理が終わるまで待ち、全てのPromiseの結果を配列で返します。この配列の順番は、Promise.allメソッドに渡したPromiseの順番と一致します。

以下に例を示します。ここでは、非同期処理であるsetTimeoutを使って、それぞれ2秒、3秒、1秒後にメッセージを表示する関数を定義しています。

function waitTwoSeconds() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('2秒経過しました!');
    }, 2000);
  });
}

function waitThreeSeconds() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('3秒経過しました!');
    }, 3000);
  });
}

function waitOneSecond() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('1秒経過しました!');
    }, 1000);
  });
}

これらの関数をPromise.allメソッドを使って実行すると、以下のようになります。

async function waitAll() {
  const results = await Promise.all([waitTwoSeconds(), waitThreeSeconds(), waitOneSecond()]);
  console.log(results); // ['2秒経過しました!', '3秒経過しました!', '1秒経過しました!']
}

上記のコードでは、Promise.allメソッドに3つのPromiseを渡し、全てのPromiseの処理が終わるまで待ち、結果を配列で受け取っています。そして、配列の内容をコンソールに表示しています。

このように、async/await構文とPromise.allメソッドを使うことで、複数の非同期処理を簡単に実行することができます。

まとめ

以上が、JavaScriptのasync/await構文についての使い方とサンプルコードの説明でした。async/await構文を使うことで、非同期処理の結果を簡単に操作することができ、コードが読みやすくなります。ぜひ、実際に使ってみてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次