【要約】わかったようでわからない非同期処理の完全理解① [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
[WARN: Partial Data] 記事は全2ページのうちの1ページ目であり、未完であるため。
// Problem
JavaScriptで非同期通信を行う初学者が、データの到着を待たずに後続の処理を実行し、実行時エラーを発生させる問題がある。通信の完了を待たずにデータを利用しようとすることで、プログラムが意図通りに動作しない。具体的には以下の問題が発生する。
- ・
fetch関数が返すのはデータそのものではなく、将来の結果を約束するPromiseオブジェクトである。 - ・
Promiseに対して直接json()メソッドを呼び出そうとすると、TypeErrorが発生する。 - ・データの取得完了と、そのデータを利用可能にするタイミングの乖離が原因で処理が破綻する。
// Approach
開発者は、
async/await構文を用いることで、非同期処理の完了を明示的に待機する実装を採用した。これにより、データの到着を待ってから次のステップへ進む制御を実現している。具体的な手順は以下の通りである。- ・
asyncキーワードを関数に付与し、関数内でawaitの使用を可能にした。 - ・
await fetch()により、HTTPレスポンスが返るまで処理の進行を一時停止させた。 - ・
await response.json()により、JSONのパースが完了するまで待機する構成とした。 - ・Vue 3の
refを用いて取得データを保持し、onMountedでコンポーネント表示時に実行した。
// Result
非同期処理の制御により、データの取得状況に応じた適切なユーザーインターフェースの表示を実現した。通信中の状態を管理することで、ユーザー体験の向上に寄与する実装となっている。
- ・
isLoadingという状態変数を用い、通信中は「作成中」のメッセージを表示させた。 - ・データの取得完了後、
refの値を更新することで、画面上の情報を自動的に書き換えた。 - ・「待機」と「表示」のプロセスを分離し、エラーを防ぐ堅牢なデータフローを構築した。
Senior Engineer Insight
> 非同期処理の基本概念を、具体的なエラー例から紐解く構成は、初学者への教育的価値が高い。実務においては、単なる「待ち」だけでなく、タイムアウト処理やリトライ戦略、エラー時のフォールバックUIの設計が不可欠である。また、大規模なアプリケーションでは、複数の非同期リクエストを効率的に管理する設計が求められる。本記事のステップは、それら高度な実装へ進むための重要な土台となる。