JavaScript で async/await を使用して、コールバックベースの関数を Promise ベースの関数に変換するにはどうすればよいですか?

Async/Await を使用したコールバックから Promise への変換

JavaScript では、コールバックは非同期操作を処理するための一般的なアプローチです。ただし、コールバックを使用すると、コードが読みにくく、保守しにくくなる可能性があります。 Async/await は、非同期コードをより簡単に操作する方法を提供する新しい機能です。

async/await の主な利点の 1 つは、Promise が解決されるまで関数の実行を一時停止できることです。これにより、特に複数の非同期操作を扱う場合に、読みやすく保守しやすいコードを作成できます。

問題ステートメント

ディメンションを取得する次の関数を考えてみましょう。コールバックを使用して、指定された 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>

ただし、画像データをすぐに取得する必要がある場合、このコードは問題になる可能性があります。 getImageData 関数を次のように呼び出すとします。

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

コールバックが実行されるまでに画像がまだ読み込まれていないため、未定義になります。

Async/ を使用するAwait

この問題を解決するには、async/await を使用して getImageData 関数を 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 gracefully
    img.src = url;
  });
}

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 を返すloadImage 関数を作成します。この Promise は、画像の読み込みが完了すると解決され、エラーが発生した場合は拒否されます。

次に、画像の寸法を返す前に、loadImage によって返された Promise が解決されるのを待機する async/await を使用する getImageData 関数を作成します。

最後に、async/await を使用して、ready 関数から getImageData 関数を呼び出すことができます。これにより、ready 関数は画像がロードされた後にのみ画像の寸法をログに記録するようになります。

async/await を使用すると、非同期操作を伴うコードを簡素化し、読み取りと保守が容易になります。

以上がJavaScript で async/await を使用して、コールバックベースの関数を Promise ベースの関数に変換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。