async/await を使用して画像読み込みコールバックを Promise に変換する方法

async/await を使用したコールバックの Promise への変換

コールバックは、非同期コードを処理する便利な方法を提供します。ただし、async/await で Promise を使用すると、コードの可読性と保守性の点で利点が得られます。この質問は、画像の幅と高さを読み込むコールバック関数を Promise ベースの実装に変換するという課題に対処します。

問題と解決策

提供されたコールバック関数 getImageData は、自然な幅を返します。ロードが完了したときの画像の高さ。ただし、次の例に示すように非同期で呼び出された場合:

ready () {
  console.log(getImageData(this.url))
}

コールバックはすぐに実行されますが、イメージのロードには時間がかかるため、返される値は未定義です。これを解決するには、Promise コンストラクターを使用して、イメージが読み込まれると解決される Promise を作成します。 Promise として更新された getImageData 関数は次のとおりです。

function getImageData(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.addEventListener('load', () => {
      resolve({ width: img.naturalWidth, height: img.naturalHeight });
    });
    img.addEventListener('error', reject); // Handle errors here
    img.src = url;
  });
}

この Promise ベースの関数では、async/await を使用して getImageData の実行を遅延させ、ロードされた画像の実際の幅と高さを取得できるようになりました。

async function ready() {
  const imageData = await getImageData(this.url);
  console.log(imageData);
}

このコードにより、画像が完全にロードされ、その幅と高さが利用可能になった後にのみコンソール ログが実行されることが保証されます。

以上がasync/await を使用して画像読み込みコールバックを Promise に変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。