南 健太郎 
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を使用する準備が整います。
ふ
|
1 2 3 4 |
#CDNのVueJs <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> #CDNのaxios <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script> |
実際にaxiosを使ってAjaxリクエスト
では、実際にaxiosを使ってAjaxリクエストを行ってみます。
実際下記のコードを作って、アクセスしてみてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<!DOCTYPE html> <html lang="en"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css"> <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app" class="container" style="padding-top: 64px;"> <div class="container"> <div class="error" v-if="error"> {{ error }} </div> <div class="columns" v-else> <div class="column"> <div class="message" v-for="bpi_info in info.data.bpi"> <div class="message-header"> <p> {{ bpi_info.code }}のレート </p> </div> <div class="message-body"> レート：{{ bpi_info.rate }}<br/> 詳細：{{ bpi_info.description }} </div> </div> <!-- add to stream form --> <add-to-stream @customcompleted="addStatus"></add-to-stream> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script> <script type="text/javascript"> new Vue({ el: '#app', data () { return { info: null, error: null } }, mounted () { axios .get('https://api.coindesk.com/v1/bpi/currentprice.json') .then(response => (this.info = response)) .catch(error => (this.error = error)) } }) </script> </body> </html> |
下記のように表示されると思います。
コードについて紹介
今回のVueのコードの部分は下記の通り。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script type="text/javascript"> new Vue({ el: '#app', data () { return { info: null, error: null } }, mounted () { axios .get('https://api.coindesk.com/v1/bpi/currentprice.json') .then(response => (this.info = response)) .catch(error => (this.error = error)) } }) </script> |
上記のコードの中で、実際のaxiosの部分は下記のコード部分です。
|
1 2 3 4 5 6 7 8 |
mounted () { #axiosコード部分 axios .get('https://api.coindesk.com/v1/bpi/currentprice.json') .then(response => (this.info = response)) .catch(error => (this.error = error)) #axiosコード部分 } |
「mounted()」は、VueJsの処理でページが表示された時点で走る処理です。
そこに、axiosでget処理をかけてレスポンスが帰ってきたらそれをスコープ内の「info」に情報を渡してテンプレート部分で表示するという流れになっています。
|
1 2 3 4 5 6 7 8 |
#axiosでget処理。 axios .get('https://api.coindesk.com/v1/bpi/currentprice.json') <!-- code --> #正しく処理が返ってきたら、スコープ内の「info」に情報を格納。 .then(response => (this.info = response)) |
|
1 2 3 |
#axiosでget処理。 axios .get('https://api.coindesk.com/v1/bpi/currentprice.json') |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#v-forを使ってループ処理を使って表示する。 <div class="message" v-for="bpi_info in info.data.bpi"> <div class="message-header"> <p> {{ bpi_info.code }}のレート </p> </div> <div class="message-body"> レート：{{ bpi_info.rate }}<br/> 詳細：{{ bpi_info.description }} </div> </div> |
レスポンスが返ってこなかった場合
getでリクエストを投げた時にエラーが発生したら、下記の「catch」部分でエラーを検知して、それをスコープ内の「error」に格納します。
|
1 2 |
#エラーがあれば、スコープ内のerrorに格納。 .catch(error => (this.error = error)) |
今回のコードでやっている処理は以上です。
他にも、POSTなどのリクエストについては、下記のドキュメントに書いてあるので、見てみてください。
axiosでPOSTリクエストを送る場合
最初の例では、GETリクエストでしたが、今度はPOSTについても紹介します。
axiosでPOSTリクエストを送る場合は、下記のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
methods: { send_data( response ){ if( response.status === 200 ){ console.log(response.data) } }, on_submit(){ let params = { 'first_name' : this.first_name, 'last_name' : this.last_name, 'email' : this.email, }; axios .post('/email/send', params) .then(this.send_data) .catch(error => ( this.error = error ) ) } } |
コードについて解説
上記のコードで使っている関数は２つ。
・send_data
・on_submit
send_data関数について
send_data関数については、基本的にやっていることは通信が成功したら、axiosのthenでコールバックとして指定しています。
(コールバックで、指定する時は「this.関数名」とするようにします。)
コールバックに指定することで、自動的に引数の中にAjaxの通信の「response」が格納されます。
それをあとは、好きなように処理をかけます。
|
1 2 3 4 5 6 7 8 9 |
#axiosのthenのコールバックに指定 send_data( response ){ #返ってきたステータスをチェック。 if( response.status === 200 ){ #正常に返ってきたら、consoleに返ってきたデータを表示。 console.log(response.data) } } |
on_submit関数について
on_submit関数では、まずPOSTで渡すパラメーターを下記のように指定します。
|
1 2 3 4 5 |
let params = { 'first_name' : this.first_name, 'last_name' : this.last_name, 'email' : this.email, }; |
axiosでパラメーターを渡す場合は、オブジェクの形にして渡すようにします。
|
1 2 3 4 5 6 7 8 9 10 |
axios #postリクエスト第一引数にリクエストのURL、第二引数にリクエストで渡すパラメーターを指定 .post('/email/send', params) #通信がうまくいけば、コールバック関数を発火。 .then(this.send_data) #エラーがあれば、エラーを検知してローカルのerror変数に格納します。 .catch(error => ( this.error = error ) ) |
これで、リクエスト先のURLにformなどで入力されたパラメーターを渡して、処理をするといったことができます。
まとめ
今回は、VueJsでaxiosを使ってAjax通信をする時の基本的な方法について紹介しました。
今回の記事が、VueJsでAjaxリクエストするのはどうすれば良いのか？
POSTでパラメーターを渡すには、どうすればいいか？
っといった僕と同じ悩みを持ったあなたの役に立てれば嬉しいです。