Async/Await を使用して、コールバック ベースの画像読み込み関数を、同期画像データ アクセスのための Promise ベースのアプローチに変換するにはどうすればよいでしょうか?

Async/Await を使用してコールバックを Promise に変換する

JavaScript では、次の関数は URL から画像データを取得します。

<code class="javascript">function getImageData(url) {
  const img = new Image();
  img.addEventListener('load', function() {
    return { width: this.naturalWidth, height: this.naturalHeight };
  });
  img.src = url;
}</code>

この関数はコールバック アプローチを使用しますが、画像データに同期的にアクセスしようとすると制限が生じます。

<code class="javascript">ready() {
  console.log(getImageData(this.url));
}</code>

のように、ready メソッド内で getImageData を呼び出すと、画像がまだ読み込まれていないため、unknown が取得されます。したがって、画像データにアクセスする前に、非同期手法を利用して画像の読み込み操作を処理する必要があります。

これを実現するには、次のように 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 error cases as well
    img.src = url;
  });
}</code>

Nowでは、async/await を使用して、loadImage Promise を待機し、その後画像データを取得できます。

<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>

この変更された実装では、async/await により、loadImage Promise が解決されるまでコードが一時停止することが保証されます。画像データはログ記録時に利用可能です。

以上がAsync/Await を使用して、コールバック ベースの画像読み込み関数を、同期画像データ アクセスのための Promise ベースのアプローチに変換するにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。