非同期処理についてメモ
実務で非同期処理の実装をする際に気付いたことやエラーの対応方法など
実装方法について
登録処理が成功した場合は、編集ページに遷移して完了のメッセージをalert関数を使って表示。
エラーが発生した場合は、ページの一番上にスクロールして適切な位置にバリデーションメッセージを表示する。
javascriptの非同期は 「fetch」jQueryの非同期は「$.ajax」を使用する
Fetchを使ったコードの参考サイト：https://gray-code.com/javascript/implement-ajax-using-fetch-api/
FetchとAJAXの違いについて参考サイト：https://apidog.com/jp/blog/javascript-fetch-ajax/
エラーの種類と概要
・302エラー
セッションの取得の失敗やjavascript側とバックエンド側の処理でレスポンス形式が違う
→javascript側では return response.json(); 、バックエンド側では return view('ブレードファイル'); など
・500 Internal Server Error エラー
サーバー側で起きるエラーで、SQLの操作(テーブルに対しての値の格納やテーブルから値の取得)に失敗した場合に発生する。
Laravel.logファイルに出力されるため、その内容を参考にする。
・422 Unprocessable Content エラー
バリデーションエラーが発生した場合などに起こります。
バリデーション設定の確認や値の受け渡しが行われているか確認をする必要がある。
学んだこと
・Logger関数について
コントローラやサービスクラスの処理の初めなどにLogger('使用している機能や変数を入れる')関数を記載して、ボタンなどを押した際に処理が走っているか確認する。
変数を入れた場合は変数の中身がログで確認出来る、値が入っていない場合はエラーとなる。
通常の文字を入れたのみでも、処理が動作していればLogファイルに記載される。
・console.logについて
javascriptの処理で確認したい部分でconsole.log('変数名')を実施して、変数に値が格納されているか、DBからの値受け取りがうまくいっているかなどを確認することが重要。
デベロッパーツールのソースでブレークポイントを用意し、コードの動きなどを見ることも問題解決の糸口になる可能性がある。
条件分岐などでどのコードを実施しているかなど追うこと。
参考サイト
https://qiita.com/ryosuketter/items/dd467f827c1b93a74d76
https://zenn.dev/nameless_sn/articles/javascript_async_tutorial
https://enginiya.com/entry/laravel-how-to-use-ajax#google_vignette