JavaScript 開発者のための Aysnc と Await の実践ガイド

導入

Async と Await は、ECMAScript 2017 (ES8) で導入された JavaScript キーワードで、より読みやすく、同期に似た、管理しやすい方法で非同期コードを作成できるようにします。これらにより、API からのデータのフェッチなど、完了までに時間がかかる操作の処理が簡素化されます。

本題に入る前に、まず JavaScript の同期プログラミングと非同期プログラミングの概念を理解しましょう。同期プログラミングでは、タスクは出現順に次々に実行されます。各タスクは、次のタスクが開始される前に完了する必要があります。一方、非同期プログラミングではタスクをバックグラウンドで実行できるため、JavaScript は前のタスクの終了を待たずに他のタスクの実行を継続できます。

ご存知のとおり、JavaScript はシングルスレッド言語です。つまり、一度に 1 つのタスクしか実行できません。その場合、JavaScript は非同期コードをどのように処理するのでしょうか?これは、JavaScript ランタイム環境と並行して動作する重要なメカニズムであるイベント ループによって可能になります。イベント ループにより、メイン スレッドをブロックせずに非同期操作を実行できるため、JavaScript の応答性が確保されます。早速、コーヒーを飲みながら今日のトピックに移りましょう!

非同期とは何ですか?

この概念をより深く理解するために、より実践的なアプローチを採用します。 async と await が導入される前は、Promise は ES6 (ECMAScript 2015) で導入された「古い方法」を使用して処理されていました。以下の例を見てみましょう。

上記のコードは、Promise を処理するための従来の構文を示しています。 Promise コンストラクターは、新しい Promise インスタンスを作成するために使用されます。この関数は、引数として関数 (エグゼキューター関数と呼ばれる) を受け取ります。この関数には、resolve と accept という 2 つのパラメーターが含まれます。この実行関数には、非同期操作のロジックが含まれています。この例では、resolve がすぐに呼び出され、Promise が特定の値で正常に完了したことを通知します。 Promise が解決されると、.then メソッドがトリガーされ、コールバックを実行して結果を記録します。

ただし、この構文は覚えるのが少し難しい場合があります。 async/await の導入により、Promise を処理するプロセスが簡素化され、読みやすく理解しやすくなりました。以下の例を見てみましょう。

非同期関数を実装するには、async キーワードを使用します。これは、これが通常の関数ではなく非同期関数であることを JavaScript に伝えます。 2 番目の例は、アロー関数を使用して同じことを行う方法を示しています。

もう 1 つ注意すべき重要な概念は、await キーワードです。 async と await は両方とも連携して、Promise の処理を​​簡素化します。 await キーワードは非同期関数内でのみ使用できます。関数の外や通常の関数内では使用できません。これは、常に、非同期としてマークされた関数内に存在する必要があります。基本を説明したので、概念をさらに詳しく見ていきましょう!

舞台裏での仕組み

多くの JavaScript 開発者はコード内で async/await を定期的に使用していますが、内部で async/await がどのように機能するかを真に理解している開発者はほんのわずかです。そこでこのチュートリアルの出番です。例を見て詳しく見てみましょう。

この例では、async/awaitapproach と比較して Promise がどのように機能するかをよりよく理解するために .then メソッドを使用します。 handlePromise() 関数が呼び出されると、コードが 1 行ずつ実行されます。 JavaScript が .then メソッドに遭遇すると、コールバックをマイクロタスク キューに登録し、すぐに次の行に移動して「hello world」を出力します。

すべての同期タスクが完了すると、JavaScript エンジンは保留中のタスクがないかマイクロタスク キューをチェックします。 5 秒後、setTimeout が完了し、そのコールバックがコール スタックにプッシュバックされます。この時点で、Promise が解決され、登録されたコールバックが実行され、結果がログに記録されます。

つまり、JavaScript エンジンは待機せず、コードの次の行に直接移動します。では、async/await を使用する場合も同じ動作が適用されるのでしょうか、それとも異なる動作をするのでしょうか?調べてみましょう!

上の例では、handlePromise() 関数が呼び出されると、最初の行「the start」が出力されます。次に、JavaScript は await キーワードを検出します。これは、関数が非同期であり、Promise が含まれていることを示します。 setTimeout により、Promise の解決に 5 秒かかることがわかります。この時点で、handlePromise() 関数は一時停止され (呼び出しスタックから削除され)、関数内の await 以降のコードは一時停止されます。

JavaScript エンジンはプログラムの残りの部分を実行し続けます。 5 秒後、Promise が解決され、中断された関数がコール スタックに返され、handlePromise() 内の残りの行「Promise issolved」と「the end」が順番に実行されます。

関数を一時停止してもメインスレッドはブロックされないことに注意することが重要です。 handlePromise() 関数の外側に他のコードが記述されている場合、そのコードは Promise の解決を待っている間に実行されます。

以下の例は、実際の動作を示しています。

この例では、最初の出力が開始です。 JavaScript が await キーワードを検出すると、Promise の解決に 5 秒かかることが認識されます。この時点で、関数は一時停止され、JavaScript は関数の外部のコードの実行に移ります。その結果、次に「We are external」が印刷されます。

5 秒後に Promise が解決されると、handlePromise() 関数がコール スタックに復元され、残りの行が実行され、Promise が解決された後に終了が表示されます。

もう 1 つの例を調べてみましょう。概念をよりよく理解するために、他の例で async/await を使用して API 呼び出しを行ってみます。

上記のコードでは、実行プロセスは前に説明したのと同じ原則に従います。 JavaScript がフェッチ関数に遭遇すると、getData() 関数を一時停止し、フェッチ呼び出しが応答オブジェクトを返すのを待ちます。このオブジェクトには、ステータス、ヘッダー、応答の本文などのさまざまなプロパティが含まれます。応答が利用可能になると、関数は実行を再開します。

応答本文は必要なデータですが、生の形式 (テキストまたはバイナリなど) であり、すぐには使用できません。操作を容易にするためにこれを JavaScript オブジェクトに変換するには、生の JSON 応答を解析する .json() メソッドを使用します。このプロセスには別の Promise が関与するため、2 番目の await が必要になります。 Promise が解決されるまで、関数は再び一時停止されます。

両方の Promise が満たされると、getData() 関数が再開され、解析されたデータがコンソールに出力されます。フェッチの仕組みを説明する簡単な方法ですね。さて、本題の議論に戻りましょう。 API 応答が失敗した場合はどうなりますか? async/await でエラーを管理するにはどうすればよいでしょうか?これについては次のセクションで詳しく見てみましょう。

Async/Await によるエラーの処理

従来、Promise のエラーは .catch メソッドを使用して処理されていました。しかし、async/await を使用するときにエラーを処理するにはどうすればよいでしょうか?ここで try...catch ブロックが登場します。

上記のコードでは、Promise は try ブロックで囲まれており、Promise が正常に解決された場合に実行されます。ただし、Promise が拒否された場合、エラーはキャッチされ、catch ブロック内で処理されます。

しかし、従来の方法でもエラーを処理できることをご存知ですか?以下に例を示します:

従来のアプローチを使用して async/await でエラーを処理するには、上で示したように、関数に catch メソッドをアタッチするだけです。これは try/catch ブロックと同じように機能します。

結論

Async/await は JavaScript の非同期操作の処理方法に革命をもたらし、.then や .catch などの従来のメソッドと比べてコードが読みやすく、管理しやすくなりました。 async と await を活用することで、より同期しているように感じられる非同期コードを作成でき、コード全体の明瞭さが向上します。イベント ループやマイクロタスク キューなどの内部動作を理解しながら、async/await を実装することは簡単で、最新の JavaScript 開発にとって非常に効果的です。 try/catch または .catch を使用して適切なエラー処理を行うことで、成功した Promise と失敗した Promise の両方を自信を持って管理できます。

最後までお付き合いいただきありがとうございました!この記事で async/await がもう少しわかりやすくなったと幸いです。コーディングの冒険が成功することを祈っています。素晴らしいものを構築してください!

以上がJavaScript 開発者のための Aysnc と Await の実践ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。