Async/Await を使用して、コールバックベースの関数から画像の寸法を安全に取得するにはどうすればよいでしょうか?

Async/Await を使用したコールバックからの Promise の作成

提供された関数 getImageData は、ロード時にコールバックを利用して画像の寸法を取得します。ただし、プロパティにアクセスする前に画像が完全に読み込まれていない場合、JavaScript の同期的な性質により、値が未定義になる可能性があります。

これに対処するには、Promise と async/await を活用して、幅と幅の可用性を保証できます。

コールバックを Promise に変換する

最初のステップは、getImageData 関数を Promise に変換することです。これは、Promise コンストラクターを使用して実現できます。

<code class="javascript">function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.addEventListener('load', () => resolve(img));
    img.addEventListener('error', reject); // Handle errors
    img.src = url;
  });
}</code>

Async/Await の使用

loadImage 関数を Promise として使用すると、async/await を使用して確実に実行できます。画像はその寸法にアクセスする前にロードされます:

<code class="javascript">async function getImageData(url) {
  const img = await loadImage(url);
  return { width: img.naturalWidth, height: img.naturalHeight };
}
async function ready() {
  console.log(await getImageData(this.url))
}</code>

このバージョンは、画像のロードが完了した場合にのみ画像の寸法で解決される Promise を返します。 Ready 関数は、未定義の値を検出することなくこれらのディメンションをログに記録できるようになりました。

以上がAsync/Await を使用して、コールバックベースの関数から画像の寸法を安全に取得するにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。