【React】処理の順番を制御する　”async”・”await”

“async”, “await”とは？

Reactにおいて「async」と「await」は、非同期処理を行うために使用されます。非同期処理を行うことで、JavaScriptは他の処理を同時に実行することができ、アプリケーションのパフォーマンスを向上させることができます。

「async」と「await」を使うと、コードが同期的に書けるため、非同期処理が終了するまで待機するためのコールバック関数を書く必要がありません。

“async”, “await”を使った具体例

以下は、非同期処理を使用するReactの例です。

// 非同期処理を行う関数を定義
async function fetchData() {
  const response = await fetch('https://example.com/api/data');
  const data = await response.json();
  return data;
}

// fetchData()関数を呼び出してデータを取得する
async function getData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

この例では、fetchData()関数で非同期処理を行い、外部APIからデータを取得しています。asyncとawaitを使用することで、非同期処理を同期処理のように扱うことができます。awaitキーワードは、Promiseオブジェクトが完了するまで待機し、完了後に結果を返します。try...catch文を使用して、エラー処理を行っています。