5/28 Vue.js

自分なりの解釈

非同期通信

最近はasync関数とawaitを使うようになっているらしい。

async関数を使用すると返り値がPromiseという処理の完了を判別できる型になる。

awaitを使用すると処理が完了してから次の処理を実行するタイマーのような役割と関数び本来の返り値を返すという役割がある。

この本来の返り値を返すという処理がないとasync関数の返り値が全てPromise型になってしまう。

これらを使用しないと非同期通信の場合、処理が終了していないのに次の処理が実行されてしまい結果的に正しい返り値を待たずに処理が完了してしまい意図したがデータを取得できないことになる。

今日学習した処理の流れ

画面表示時に非同期通信したい場合はcretedかmountedに

イベントで非同期通信したい場合はmethodsに

リアルタイムで非同期通信したい場合はwatchに記述する。

関数で定数responseにレスポンスの内容をjson形式で入れたい

そのために関数をasync関数として

await ftech(url, option) ftechの引数にアクセス先とアクセスメソッドなどのoptionを渡す

.then( response => response.json() )とすることでftech完了後にresponseをjson形式に変換する。

レスポンスから使用したいデータ取り出してdataに入れる。

以後、仮想DOM内でdataとして使用できるようになる。