ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript でコールバックで Async/Await を利用するにはどうすればよいですか?

JavaScript でコールバックで Async/Await を利用するにはどうすればよいですか?

Linda Hamilton
Linda Hamiltonオリジナル
2024-10-30 11:11:05661ブラウズ

 How to Utilize Async/Await with Callbacks in JavaScript?

コールバック解決待ち

以下の例のような単純なコールバックが利用されるシナリオ:

test() {
  api.on( 'someEvent', function( response ) {
    return response;
  });
}

この関数を async/await を使用するように変換するには、わずかな変更が必要です。 「someEvent」が 1 回だけ呼び出されることが保証されていると仮定すると、「test」関数はコールバックの実行を待機する非同期関数に変換できます。

async test() {
  return await api.on( 'someEvent' );
}

ただし、async/await は本質的に機能しません。コールバックを直接処理する方法。このギャップを埋めるには、Promise を返すように api.on() を再設計する必要があります。以下に例を示します。

function apiOn(event) {
  return new Promise(resolve => {
    api.on(event, response => resolve(response));
  });
}

この変更により、「test」関数は次のように記述できるようになりました。

async function test() {
  return await apiOn( 'someEvent' ); 
}

このコンテキストでは、await キーワードは基本的にオプションであることに注意してください。どちらのアプローチでも Promise が返されることになります。

最後に、非同期関数自体が Promise を返すことを覚えておくことが重要です。そのため、「test()」によって返された値に直接アクセスすることはできません。代わりに、返された Promise を処理する必要があります:

async function whatever() {
  // snip
  const response = await test();
  // use response here
  // snip
}

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。