Reactでの非同期処理の方法

コールバック関数: コールバック関数は、非同期処理が完了した後に呼び出される関数です。以下の例では、setTimeout関数を使用して非同期な処理をシミュレートしています。

function fetchData(callback) {
  setTimeout(() => {
    const data = '取得したデータ';
    callback(data);
  }, 1000);
}
fetchData((data) => {
  console.log(data);
});

Promises: Promisesは、非同期処理の結果を表すオブジェクトです。以下の例では、fetch関数を使用して非同期なデータの取得を行っています。

function fetchData() {
  return new Promise((resolve, reject) => {
    fetch('データのURL')
      .then((response) => response.json())
      .then((data) => resolve(data))
      .catch((error) => reject(error));
  });
}
fetchData()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

async/await: async/awaitは、非同期処理をより直感的に扱うための構文です。以下の例では、fetchData関数をasyncキーワードで定義し、awaitキーワードを使用して非同期なデータの取得を行っています。

async function fetchData() {
  try {
    const response = await fetch('データのURL');
    const data = await response.json();
    return data;
  } catch (error) {
    throw new Error(error);
  }
}
(async () => {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
})();

これらはReactで非同期処理を行うための一般的な方法のいくつかです。選択する方法は、プロジェクトの要件や個人の好みによって異なります。適切な方法を選択して、効果的な非同期処理を実装してください。