Unsplashこんにちは!個人開発者の南です!今回は、VueJsでaxiosというライブラリを使ってAjax通信をする基本的な方法について紹介します!VueJsでAjaxリクエストするのはどうすれば良いのか?POSTでパラメーターを渡すには、どうすればいいか?といったことについて、紹介していきますので、ぜひ最後まで読んでみてください。axiosとは?axiosとは、NodejsやXMLHttpRequestsでHTTPリクエストをするためのJavaScriptのライブラリーです。VueJsでAjaxリクエストとかを検索すると、おそらく見ることが多いはず。Vueには、VuexでAjaxを実装することがあるみたいですが、こちらの方はまだ触っていません。axiosの基本的な使い方axisはnpmでインストールする方法とCDNでロードする方法があるようです。今回は、CDNを使う方法を紹介します。下記のコードをコピペすることで、axiosを使用する準備が整います。src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>実際にaxiosを使ってAjaxリクエストでは、実際にaxiosを使ってAjaxリクエストを行ってみます。実際下記のコードを作って、アクセスしてみてください。error))}})</script></body></html>下記のように表示されると思います。今回のVueのコードの部分は下記の通り。error))}})</script>上記のコードの中で、実際のaxiosの部分は下記のコード部分です。error))#axiosコード部分}「mounted()」は、VueJsの処理でページが表示された時点で走る処理です。そこに、axiosでget処理をかけてレスポンスが帰ってきたらそれをスコープ内の「info」に情報を渡してテンプレート部分で表示するという流れになっています。#axiosでget処理。#正しく処理が返ってきたら、スコープ内の「info」に情報を格納。response))12345678#axiosでget処理。-->#正しく処理が返ってきたら、スコープ内の「info」に情報を格納。response))#axiosでget処理。.get('https://api.coindesk.com/v1/bpi/currentprice.json')123#axiosでget処理。axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')#v-forを使ってループ処理を使って表示する。</div>12345678910111213#v-forを使ってループ処理を使って表示する。}}</div></div>レスポンスが返ってこなかった場合getでリクエストを投げた時にエラーが発生したら、下記の「catch」部分でエラーを検知して、それをスコープ内の「error」に格納します。#エラーがあれば、スコープ内のerrorに格納。error))12#エラーがあれば、スコープ内のerrorに格納。error))今回のコードでやっている処理は以上です。他にも、POSTなどのリクエストについては、下記のドキュメントに書いてあるので、見てみてください。最初の例では、GETリクエストでしたが、今度はPOSTについても紹介します。axiosでPOSTリクエストを送る場合は、下記のように記述します。上記のコードで使っている関数は2つ。・send_data・on_submitsend_data関数についてsend_data関数については、基本的にやっていることは通信が成功したら、axiosのthenでコールバックとして指定しています。(コールバックで、指定する時は「this.関数名」とするようにします。)コールバックに指定することで、自動的に引数の中にAjaxの通信の「response」が格納されます。それをあとは、好きなように処理をかけます。#返ってきたステータスをチェック。#正常に返ってきたら、consoleに返ってきたデータを表示。){#返ってきたステータスをチェック。){#正常に返ってきたら、consoleに返ってきたデータを表示。console.log(response.data)}}on_submit関数についてon_submit関数では、まずPOSTで渡すパラメーターを下記のように指定します。this.email,};axiosでパラメーターを渡す場合は、オブジェクの形にして渡すようにします。#通信がうまくいけば、コールバック関数を発火。#エラーがあれば、エラーを検知してローカルのerror変数に格納します。params)#通信がうまくいけば、コールバック関数を発火。.then(this.send_data)#エラーがあれば、エラーを検知してローカルのerror変数に格納します。error))これで、リクエスト先のURLにformなどで入力されたパラメーターを渡して、処理をするといったことができます。まとめ今回は、VueJsでaxiosを使ってAjax通信をする時の基本的な方法について紹介しました。今回の記事が、VueJsでAjaxリクエストするのはどうすれば良いのか?POSTでパラメーターを渡すには、どうすればいいか?っといった僕と同じ悩みを持ったあなたの役に立てれば嬉しいです。健太郎1991年生まれ。関西を中心にフリーのプログラマーをしています。日々の技術に関する情報などを発信していきます。健太郎2019年9月13日この投稿へのコメントコメントはありません。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。この投稿へのトラックバックトラックバックはありません。