async/awaitについて改めて調べる

JavaScriptの非同期処理には、コールバック関数、Promise、そしてasync/awaitという三つの方法があります。Promiseは基礎的な概念として説明したので、今回はasync/awaitについて解説します。
async/awaitは、Promiseをさらに簡単に扱えるようにした機能であり、非同期処理の記述をよりシンプルにすることができます。async/awaitを使うことで、非同期処理が同期的に記述でき、コードの可読性が高まるというメリットがあります。

まず、async/awaitを使うには、関数の前にasyncをつける必要があります。そして、非同期処理が含まれる部分にはawaitをつけ、その戻り値を変数に代入することで、処理の完了を待つことができます。以下に、具体的な例を示します。

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const error = false;
      if (!error) {
        resolve({ name: 'John', age: 22 });
      } else {
        reject('データの取得に失敗しました');
      }
    }, 2000);
  });
}

async function fetchUserData() {
  try {
    const userData = await fetchData();
    console.log(userData);
  } catch (error) {
    console.log(error);
  }
}

fetchUserData();

fetchDataは、非同期でデータを取得し、成功した場合にはオブジェクトを、失敗した場合にはエラーメッセージをPromiseで返す関数です。fetchUserDataでは、asyncを使って関数を宣言し、awaitを使ってfetchData関数の処理の完了を待ちます。そして、try...catch構文を使って、成功時には取得したオブジェクトをコンソールに出力し、失敗時にはエラーメッセージをコンソールに出力します。

async/awaitを使うことにより、非常にシンプルで直感的なコードになっていることがわかります。また、コールバック関数よりもネストの深さが浅く、Promiseよりも記述が簡単になっているというメリットもあります。

なお、async/awaitを使う場合は、Promiseを返す関数内でのみ使用することができます。例えば、以下のような非同期処理を行う関数は、async/awaitを使わなければなりません。

const fetchUserAndRepos = async () => {
  const userData = await fetchData();
  const reposData = await fetchRepos(userData.name);
  return { ...userData, repos: reposData };
}

fetchUserAndRepos().then(userDataWithRepos => {
  console.log(userDataWithRepos);
}).catch(error => {
  console.log(error);
});

fetchUserAndReposは、ユーザー情報とリポジトリ情報を取得し、それらをオブジェクトとして返すPromiseを返す関数です。非同期の処理を依存関係のある複数の部分に分けて扱うため、awaitを複数回使っています。

以上が、async/awaitに関する基本的な説明になります。Promiseよりシンプルに直感的に記述でき、コードの可読性を高めることができるため、JavaScriptにおいて重要かつ便利な機能です。