非同期通信を学んでみた

はじめに

Laravel+Vue.jsでは、そもそも内部で非同期通信やAPIを使用しています。

ポートフォリオ制作にこのあたりの知識は必須だと思ったので調べました。

async/await構文とPromiseFetch

※タイトルリンク(とてもわかりやすいです。)を参考に備忘録としてまとめています。

async

複数の非同期処理を同期処理風に記述することができる。

※Promiseを同期的に使用する動作を簡素化する。

async function で非同期関数を定義。暗黙的にPromiseを返す。

await

awaitは非同期関数async functionの中で利用できる演算子。

async function によって Promise が返されるのを待機するために使用する。

解決後、async関数の実行を再開。値を返す。

Promise

Promise は非同期処理の最終的な完了もしくは失敗を表すオブジェクト。

コールバック関数で入れ子が深くなりすぎる傾向を解決(非同期処理の連結)してくれる。

※try~catch,.thenの理解が必要そう。

Promiseに関連するメソッド

・thenメソッド:処理が成功した場合の処理

・catchメソッド:処理が失敗した場合の処理

・finallyメソッド:処理の成否にかかわらず実行する処理

Fetch

fetch(url,オプション) メソッドは指定したURLから値をfetch (取得) し、Response オブジェクトの Promise を返す 。

その他参考

Ajaxについて細かく解説されています。

Axiosについて結構詳しく書いてあります。(しかも意外にもわかりやすかった。)

勉強し始めた当時は分かりづらくて猫本を買いましたがこちらは逆にAxiosに関してあまり触れられていないです。

やっと活躍してくれた。笑

おわりに

Ajaxを実装する際はHTML+JS+PHP(HTMLだと変数書けない&リクエストできない)ファイルが必要になるのがミソだと思いました。

まだまだ要学習ではありますが、非同期通信をマスターしてポートフォリオ制作にはやく活かしていきたいです。

コメントを残す