ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript の非同期関数が値ではなく Promise を返すのはなぜですか?

JavaScript の非同期関数が値ではなく Promise を返すのはなぜですか?

Barbara Streisand
Barbara Streisandオリジナル
2024-10-18 10:47:03327ブラウズ

Why Do Async Functions in JavaScript Return a Promise and Not the Value?

非同期関数は値ではなく Promise を返す: 切断の解明

JavaScript の非同期プログラミングは、コード実行に革命をもたらしました。特に非同期関数は、メイン イベント ループをブロックしないコードを記述する一般的な手段となっています。ただし、非同期関数を扱うときに遭遇する一般的な落とし穴は、非同期関数が最終値を直接返さず、Promise を返すことです。これは、特に従来の同期プログラミングに慣れている開発者にとっては混乱する可能性があります。

非同期関数がこのように動作する理由を理解するには、JavaScript イベント ループの概念を理解することが重要です。イベント ループは、ブラウザまたは Node.js 環境ですべてのタスクとコールバックを管理するシングル スレッド システムです。非同期関数が呼び出されると、すぐに Promise を返します。 Promise は、非同期タスクの最終的な結果を表します。ただし、関数自体はタスクの完了を待ってから Promise を返しません。これにより、後続のコードはブロックされることなく実行を続けることができます。

次のコードを考えてみましょう:

async function fetchData() {
  const data = await fetch('https://example.com/data.json');
  return data;
}

fetchData().then((data) => {
  console.log(data);
});

この例では、fetchData 関数はフェッチ操作の最終結果を表す Promise を返します。 。ただし、関数自体はフェッチの完了を待ってから Promise を返しません。その結果、Promise が解決されるまで console.log(data) ステートメントは実行されません。

非同期関数の最終値にアクセスするには、.then() メソッドまたは await メソッドを使用する必要があります。 .then() メソッドは、Promise が解決されるときに実行されるコールバック関数をアタッチします。上記の例では、.then() メソッドを使用して、fetchData 関数によって返されたデータを出力します。

または、別の非同期関数内で await キーワードを使用して、Promise が解決されるのを待つこともできます。これは、次のコードに示すように、非同期関数内でのみ可能です。

async function callFetchData() {
  const data = await fetchData();
  console.log(data);
}

callFetchData();

この例では、callFetchData 関数は await キーワードを使用して、データを出力する前に fetchData 関数が解決されるのを待ちます。

非同期関数の戻り値とそれが表す Promise の違いを理解することは、効率的で堅牢な非同期コードを作成するために重要です。 .then() メソッドまたは await キーワードを利用すると、非同期関数の最終値にアクセスし、Promise に関連する一般的な落とし穴を回避できます。

以上がJavaScript の非同期関数が値ではなく Promise を返すのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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