VueJsでaxiosを使ってAjax通信をする基本的な方法について紹介!

Photo by Christopher Robin Ebbinghaus on Unsplash

こんにちは!

個人開発者の南です!

今回は、VueJsでaxiosというライブラリを使ってAjax通信をする基本的な方法について紹介します!

VueJsでAjaxリクエストするのはどうすれば良いのか?

POSTでパラメーターを渡すには、どうすればいいか?

といったことについて、紹介していきますので、ぜひ最後まで読んでみてください。

axiosとは?

axiosとは、NodejsやXMLHttpRequestsでHTTPリクエストをするためのJavaScriptのライブラリーです。

VueJsでAjaxリクエストとかを検索すると、おそらく見ることが多いはず。

Vueには、VuexでAjaxを実装することがあるみたいですが、こちらの方はまだ触っていません。。。

axiosの基本的な使い方

axisはnpmでインストールする方法とCDNでロードする方法があるようです。

今回は、CDNを使う方法を紹介します。

下記のコードをコピペすることで、axiosを使用する準備が整います。


実際にaxiosを使ってAjaxリクエスト

では、実際にaxiosを使ってAjaxリクエストを行ってみます。

実際下記のコードを作って、アクセスしてみてください。

下記のように表示されると思います。


コードについて紹介

今回のVueのコードの部分は下記の通り。

上記のコードの中で、実際のaxiosの部分は下記のコード部分です。

「mounted()」は、VueJsの処理でページが表示された時点で走る処理です。

そこに、axiosでget処理をかけてレスポンスが帰ってきたらそれをスコープ内の「info」に情報を渡してテンプレート部分で表示するという流れになっています。

レスポンスが返ってこなかった場合

getでリクエストを投げた時にエラーが発生したら、下記の「catch」部分でエラーを検知して、それをスコープ内の「error」に格納します。

今回のコードでやっている処理は以上です。

他にも、POSTなどのリクエストについては、下記のドキュメントに書いてあるので、見てみてください。

axiosドキュメントはこちら

axiosでPOSTリクエストを送る場合

最初の例では、GETリクエストでしたが、今度はPOSTについても紹介します。

axiosでPOSTリクエストを送る場合は、下記のように記述します。

コードについて解説

上記のコードで使っている関数は2つ。

・send_data
・on_submit

send_data関数について

send_data関数については、基本的にやっていることは通信が成功したら、axiosのthenでコールバックとして指定しています。

(コールバックで、指定する時は「this.関数名」とするようにします。)

コールバックに指定することで、自動的に引数の中にAjaxの通信の「response」が格納されます。

それをあとは、好きなように処理をかけます。

on_submit関数について

on_submit関数では、まずPOSTで渡すパラメーターを下記のように指定します。

axiosでパラメーターを渡す場合は、オブジェクの形にして渡すようにします。

これで、リクエスト先のURLにformなどで入力されたパラメーターを渡して、処理をするといったことができます。

まとめ

今回は、VueJsでaxiosを使ってAjax通信をする時の基本的な方法について紹介しました。

今回の記事が、VueJsでAjaxリクエストするのはどうすれば良いのか?

POSTでパラメーターを渡すには、どうすればいいか?

っといった僕と同じ悩みを持ったあなたの役に立てれば嬉しいです。

この記事を書いた人

南 健太郎

1991年生まれ。関西を中心にフリーのプログラマーをしています。
今は個人開発で生活できるようになるため、日々試行錯誤中。
個人開発や日々の技術に関する情報などを発信していきます。
Twitterやってます!
良かったらフォロー、よろしくお願いします!
Twitterのリンクはこちら