ホームページ > ウェブフロントエンド > jsチュートリアル > Async/await関数を使用して、同期しているように見える非同期コードを作成するにはどうすればよいですか?

Async/await関数を使用して、同期しているように見える非同期コードを作成するにはどうすればよいですか?

Johnathan Smith
リリース: 2025-03-14 11:37:41
オリジナル
477 人が閲覧しました

Async/await関数を使用して、同期しているように見える非同期コードを作成するにはどうすればよいですか?

Async/Awaitは、同期コードのように見える非同期コードを書くことができるModern JavaScript(およびPythonやC#などの他のプログラミング言語)の強力な機能です。これを達成するためにasync/async/awaitを使用する方法は次のとおりです。

  1. 非同期関数を宣言する:async/awaitを使用するには、非同期関数を定義する必要があります。これを行うには、関数宣言の前にasyncキーワードを追加することで行うことができます。これが例です:

     <code class="javascript">async function fetchData() { // Asynchronous operations here }</code>
    ログイン後にコピー
  2. awaitキーワードを使用してください:ASYNC関数内では、約束の前にawaitキーワードを使用できます。これにより、関数が約束が解決するまで実行を一時停止し、解決された値で再開できます。フェッチAPIを使用した例を次に示します。

     <code class="javascript">async function fetchData() { const response = await fetch('https://api.example.com/data'); const data = await response.json(); return data; }</code>
    ログイン後にコピー

    この例では、 fetch約束を返し、 await行列に約束が解決するまで待機させます。解決するawait 、応答はresponse.json()を使用してJSONに変換されます。

  3. Async関数を呼び出す:非同期関数を呼び出して結果を処理するには、 .then()を使用するか、別の非同期関数内でそれをawaitできます。 fetchDataを呼び出す方法は次のとおりです。

     <code class="javascript">fetchData().then(data => console.log(data)) .catch(error => console.error('Error:', error)); // or async function useData() { try { const data = await fetchData(); console.log(data); } catch (error) { console.error('Error:', error); } }</code>
    ログイン後にコピー

これらの手順に従うことにより、同期的に見えるように非同期操作を作成し、コードを読みやすくしやすくすることができます。

非同期プログラミングで従来のコールバック方法よりもAsync/待ち望んでいることの利点は何ですか?

Async/awaitを使用すると、非同期プログラミングにおける従来のコールバック方法よりもいくつかの利点があります。

  1. 読みやすさ:Async/awaitは、非同期コードを同期コードのように見せて動作させます。これにより、従来の非同期JavaScriptで見られるネストされたコールバック(コールバックHell)と比較して、コードフローが容易になるため、これにより読みやすくなります。
  2. エラー処理:ASYNC/待ち望を使用すると、従来のTry/Catchブロックを使用してエラーを処理できます。これは、複数のコールバックエラーハンドラーを扱うよりも直感的なアプローチであり、エラー処理がより簡単で集中化されています。
  3. デバッグ:Async/Await Codeの読み取りと理解が容易であるため、デバッグも簡単です。デバッガーを使用して、同期しているかのようにコードをAsync/待つコードをステップスルーすることができます。
  4. 保守性:Async/awaitで書かれたコードは、一般的にメンテナンスが簡単です。コードのシーケンシャルな性質により、開発者は既存のコードを理解して変更しやすくなります。
  5. 相互運用性:Async/awaitは、多くの最新のJavaScript APIで広く使用されている約束とうまく機能します。これは、他の約束ベースのコードとAsync/待望をシームレスに統合できることを意味します。

コードでASYNC/待ち望を使用する場合、エラーを効果的に処理するにはどうすればよいですか?

Async/awaitを使用した効果的なエラー処理には、Async関数内でTry/Catchブロックを使用することが含まれます。これがあなたがそれを行う方法です:

  1. Try/Catchブロックを使用してください:あなたの待ち合わせ式をトライブロックに包み、キャッチブロックでエラーを処理します。

     <code class="javascript">async function fetchData() { try { const response = await fetch('https://api.example.com/data'); if (!response.ok) { throw new Error('Network response was not ok'); } const data = await response.json(); return data; } catch (error) { console.error('There was a problem with the fetch operation:', error); // You can also rethrow the error or handle it further throw error; } }</code>
    ログイン後にコピー
  2. エラー伝播:非同期関数のエラーをコールスタックに伝播することができ、必要に応じてより高いレベルでキャッチできるようにします。

     <code class="javascript">async function useData() { try { const data = await fetchData(); console.log(data); } catch (error) { console.error('Error in useData:', error); } }</code>
    ログイン後にコピー
  3. 複数の待機:複数の待ち表現がある場合は、すべての潜在的なエラーをキャッチするために、それらがすべてトライブロック内にいることを確認してください。

     <code class="javascript">async function processData() { try { const data1 = await fetchData1(); const data2 = await fetchData2(data1); // Process both data1 and data2 } catch (error) { console.error('Error in processData:', error); } }</code>
    ログイン後にコピー

Async/await機能を実装する際に避けるべき一般的な落とし穴は何ですか?

Async/await機能を実装するときは、これらの一般的な落とし穴に注意してください。

  1. awaitを忘れて:非同期関数内の約束でawaitを使用するのを忘れた場合、関数は解決する約束を待ちません。これは予期しない動作につながる可能性があります:

     <code class="javascript">async function fetchData() { const response = fetch('https://api.example.com/data'); // Missing await const data = response.json(); // This will not work as expected return data; }</code>
    ログイン後にコピー
  2. イベントループのブロック:Async/awaitが非同期コードを同期させますが、イベントループをブロックできる方法で使用しないようにしてください。たとえば、非同期関数内でCPU集約型タスクを同期して実行しないでください。
  3. ネストされた非同期関数:深くネストする非同期関数は避けてください。これは混乱につながり、読みやすさを減らすことができるためです。代わりに、Async機能をフラットに保ち、可能な場合は最上位レベルで使用してください。
  4. エラーを適切に処理しない:トライ/キャッチブロックの使用に失敗するか、エラーを適切に伝播しないと、習得されていない約束の拒否につながる可能性があります。 Async関数のエラーを常に処理します。
  5. 非アシン機能関数についてのasync :不必要な約束の作成によりasyncオーバーヘッドにつながる可能性があるため、待ちの表現を含む機能を不必要に使用しないでください。
  6. asyncawaitでいますasync非同期として関数をマークすることを忘れないでください。しかし、約束が解決するまで実際に実行を一時停止するのはawait 。これを誤解すると、コードが誤っている可能性があります。

これらの落とし穴を認識し、ベストプラクティスに従うことにより、async/async/asyncを使用して、クリーンで効率的な非同期コードを書くことができます。

以上がAsync/await関数を使用して、同期しているように見える非同期コードを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート