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

コールバック関数を async/await で Promise に変換する

JavaScript では、特定のイベントが発生するまでコードの実行を遅らせる機能が一般的な要件です。非同期コードを操作する場合、JavaScript ではコールバックが従来のアプローチでしたが、Promise は非同期操作を処理するためのより簡潔で柔軟な方法を提供します。 Promise により、操作のチェーンと待機が可能になり、非同期コードが簡素化され、読みやすさが向上します。

問題

URL から画像をフェッチし、ロードして、その幅と値を返す次の関数を考えてみましょう。 height:

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

この関数をコールバックとして使用すると、画像データにすぐにアクセスしようとすると問題が発生する可能性があります。たとえば、この関数を次のように使用すると、

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

getImageData 関数はすぐに実行されますが、画像の読み込みが完了していない可能性があり、その結果未定義の出力が生成されます。この問題を解決するには、Promise と async/await を利用して、画像が正常に読み込まれた後にのみ画像データが取得されるようにすることができます。

解決策

コールバックに依存する代わりに、次のことが可能です。 getImageData を Promise ベースの関数に変換します:

<code class="js">function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.addEventListener('load', () => resolve(img));
    img.addEventListener('error', reject); // Don't forget to handle errors
    img.src = url;
  });
}</code>

これで、async/await を使用して、画像データが利用可能になった場合にのみ画像データを取得できます:

<code class="js">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 とasync/await を使用すると、イメージがロードされた後にのみイメージ データにアクセスできるようになり、非同期操作を処理するためのより堅牢でクリーンなアプローチが提供されます。

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