JavaScript/async/await

async/await

async と await は、非同期処理をより簡潔かつ直感的に扱うための JavaScript の構文です。これらは、非同期コードを同期的に書くことを可能にし、コールバックや Promise の .then() メソッドを使うよりも、コードの可読性を向上させます。async/await は、非同期関数を作成し、非同期操作を待機するために使用されます。

async

async キーワードは、非同期関数を定義するために使用されます。非同期関数は常に Promise を返します。もし関数内で return があれば、その値は Promise.resolve() にラップされて返されます。

構文

async function example() {
  return 'Hello, world!';
}

example().then(result => console.log(result));  // 'Hello, world!'

この例では、async キーワードを使って example 関数を定義し、その戻り値は自動的に Promise になります。return が呼ばれると、`Promise.resolve('Hello, world!')` としてラップされます。

await

await キーワードは、async 関数内で使用され、Promise が解決または拒否されるのを待機するために使われます。await は非同期処理を同期的に書くために使用され、非同期関数の実行を一時的に停止させ、Promise が解決されるまで次の行のコードは実行されません。

構文

async function fetchData() {
  let response = await fetch('https://api.example.com/data');
  let data = await response.json();
  console.log(data);
}

この例では、await が fetch() 呼び出しを待機し、レスポンスを受け取ってから次の行で json() メソッドを実行します。await は Promise が解決されるまで、非同期関数の実行を停止します。

async/await の組み合わせ

async 関数内で await を使うことで、非同期コードが直線的に書かれるようになり、コールバックや .then() を使うよりも読みやすくなります。

async function fetchUserData() {
  try {
    let userResponse = await fetch('https://api.example.com/user');
    let user = await userResponse.json();
    let postsResponse = await fetch(`https://api.example.com/posts/${user.id}`);
    let posts = await postsResponse.json();
    console.log(posts);
  } catch (error) {
    console.error('Error:', error);
  }
}

ここでは、await を使って順番に非同期操作を行い、ユーザー情報を取得してからその情報に基づいて別の API 呼び出しを行っています。また、try/catch ブロックを使ってエラーハンドリングも行っています。

非同期関数のエラーハンドリング

非同期関数内でのエラーハンドリングは、try/catch を使って行います。await の呼び出しで発生したエラーは、try/catch ブロックで捕まえることができます。

構文

async function getData() {
  try {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Failed to fetch data:', error);
  }
}

ここでは、fetch() 呼び出しやその後の操作が失敗した場合に、エラーが catch ブロックで処理されます。

async/await と Promise

async/await は、実際には Promise のラッパーです。async 関数は常に Promise を返し、await は Promise が解決するまで待機します。以下の例のように、Promise を直接操作することと、async/await を使うことは同じ効果を得ることができます。

Promise の例

function fetchData() {
  return fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
}

fetchData();

async/await の例

async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchData();

どちらの方法も同じ結果を得られますが、async/await を使うことでコードの可読性が向上し、非同期操作の順番を直感的に理解することができます。

使用シーン

• 非同期処理の簡素化: 非同期処理を同期的に書けるため、コードがシンプルで可読性が高くなります。
• エラーハンドリング: try/catch を使って非同期操作のエラーを簡単に扱うことができます。
• 順番に処理を行いたい場合: 非同期操作を順番に行う際、await を使うことで処理の順序が直感的に分かりやすくなります。

注意点

• await は async 関数内でのみ使用できます。非同期関数でない場所で await を使うと、エラーが発生します。
• await は Promise が解決されるまで待機するため、非同期処理の並列実行には適していません。並列処理を行いたい場合は、Promise.all() などを使います。

関連項目

• Promise
• 非同期処理
• then()
• 非同期関数

参考

• MDN Web Docs: async
• MDN Web Docs: await