JavaScriptにおけるPromiseの使用方法

Promiseの基本的な使い方: Promiseはnewキーワードを使用して作成されます。以下は、非同期なデータの取得をシミュレートする例です。

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    const data = '取得したデータ';
    resolve(data); // データの取得が成功した場合にresolveを呼び出す
    // エラーが発生した場合は、rejectを呼び出すこともできます
  }, 2000);
});
fetchData.then((data) => {
  console.log(data); // 取得したデータを表示する
}).catch((error) => {
  console.log(error); // エラーメッセージを表示する
});

Promiseチェーン: Promiseはチェーン可能なオブジェクトであり、複数の非同期処理を順番に実行することができます。以下は、非同期なデータの取得と処理を順番に行う例です。

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = '取得したデータ';
      resolve(data);
    }, 2000);
  });
};
const processData = (data) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const processedData = data.toUpperCase();
      resolve(processedData);
    }, 1000);
  });
};
fetchData()
  .then(processData)
  .then((result) => {
    console.log(result); // 処理されたデータを表示する
  })
  .catch((error) => {
    console.log(error);
  });

複数のPromiseの同時実行: Promise.allメソッドを使用すると、複数の非同期処理を同時に実行し、全ての処理が完了した時点で結果を取得することができます。以下は、複数の非同期なデータの取得と処理を同時に行う例です。

const fetchData = (url) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = `取得したデータ: ${url}`;
      resolve(data);
    }, Math.random() * 2000);
  });
};
const urls = ['https://example.com/data1', 'https://example.com/data2', 'https://example.com/data3'];
const promises = urls.map((url) => fetchData(url));
Promise.all(promises)
  .then((results) => {
    console.log(results); // 取得したデータの配列を表示する
  })
  .catch((error) => {
    console.log(error);
  });

これらのコード例を参考にすることで、JavaScriptにおけるPromiseの使用方法とその応用について理解を深めることができます。非同期処理を行う際には、Promiseを活用して効果的なコードを書くことが重要です。