JavaScript Promiseの構文と使い方！

JavaScript Promiseの構文と使い方について知りたいときはないでしょうか。

けど、そんな中で悩むことは、

ですよね。

今回はそんなお悩みを解決する

についてまとめます！

JavaScript Promiseとはなに？

JavaScript Promiseは、非同期処理の結果を表現するオブジェクトです。

Promiseは、処理が完了した場合に成功（成功時の値を返す）または失敗（エラーを返す）をキャッチアップすることができます。

Promiseを使用することで、コールバック関数を使用するよりも複雑な非同期処理を管理することができます。

タカヒロ

Promiseを入れないと例えば、読み込み処理が終わらない状態でページ遷移させてしまい、ページのデータが空っぽということになるので、非同期処理で複合的に処理を行っている場合はかならずいれるようにしましょう。

JavaScript Promiseの構文

Promiseの構文は以下のようになります。

組み合わせ例

例えば、次のような非同期処理を Promiseで表現することができます。

サンプルコードでは、fetch() メソッドで非同期処理を実行し、その結果を Promise で表現しています。

成功時には resolve() メソッドを呼び出し、取得したデータを返します。失敗時には reject() メソッドを呼び出し、エラーを返します。
Promiseを使用する場合、処理の完了を待つために、then() メソッドを使用して成功時と失敗時の処理を定義することができます。

function fetchData() {
  return new Promise(function(resolve, reject) {
    // 非同期処理の実行
    fetch('https://example.com/data')
      .then(function(response) {
        if (response.status === 200) {
          return response.json();
        } else {
          throw new Error('データの取得に失敗しました。');
        }
      })
      .then(function(data) {
        resolve(data);
      })
      .catch(function(error) {
        reject(error);
      });
  });
}

具体的な処理を含むサンプルコード

Promiseを使った具体的な処理を含むサンプルコードです。この例では、非同期で画像を読み込んで、読み込みが完了したら画像を表示するようにします。

function loadImage(url) {
  return new Promise(function(resolve, reject) {
    var image = new Image();
    image.onload = function() {
      resolve(image);
    };
    image.onerror = function() {
      reject('画像の読み込みに失敗しました。');
    };
    image.src = url;
  });
}

loadImage('https://kininariantenna.com/wp-content/uploads/2022/11/kini-js.png')
 .then(function(image) {
		console.log(image.src);
  })
  .catch(function(error) {
		console.log(error);
  });

上記の例では、loadImage() 関数でPromiseを作成しています。

このPromiseは、このページで使われている画像（’https://kininariantenna.com/wp-content/uploads/2022/11/kini-js.png’）の読み込みが完了したら resolve() メソッドを呼び出して、画像オブジェクトを返し、
エラーが発生した場合には、reject() メソッドを呼び出してエラーメッセージを返しています。

loadImage() 関数を呼び出すと、Promiseオブジェクトが返され、then() メソッドで画像の表示処理を継続させていきます。
catch()メソッドではエラー処理を定義していきます。

また、画像を読み込むためImage オブジェクトを使用し、
画像の読み込みが完了したときにonloadイベント、
エラーが発生した場合にはonerrorイベントが発生します。

そしてそれぞれのイベントに対して、resolve()メソッドまたは reject()メソッドを呼び出すことで、
Promiseの状態を変更しています。

結果は以下の通りです。

正常の場合

異常（画像が見つからない）場合

さいごに

今回は、

についてまとめました。

また、他にも役に立つ情報がありますので、よろしければご参照頂ければと思います。