エラーについてvue.js+axiosの使える環境を構築vue.jsを使ってaxiosの使用方法を学ぶことが目的の場合はcdnを使うのが一番はやく簡単です。今回は下記のHTMLを元にaxiosの動作確認を行っていきます。Axiosが表示されることを確認してください。</body></html>JSONPlaceholder自分以外が運営している外部のサーバからaxiosを使ってデータを取得することができれば内部/外部問わずどのようなサービスからでもデータを取得することに対する技術的不安がなくなります。そのため今回は無料の外部サービスであるJSONPlaceholderを使用します。APIの動作確認をオンラインで行うためのサイトです。このサービスを使用すれば、axiosを動作確認をするために事前にデータを準備する必要がありません。axiosの使用方法GETメソッドによるデータ取得JSONPlaceholderには、6つのリソースが準備されています。数の少ないusersから情報を取得してみましょう。JSONplaceholderの6つのリソースブラウザからhttps://jsonplaceholder.typicode.com/usersにアクセスしてもusersのデータを確認することができます。axiosのGETメソッドの書式は下記のとおりです。getの引数にURLを入れるだけでURLに対してGETリクエストを送ることができます。リクエスト後に戻される値はすべてresponseの中に保存されます。});Vueインスタンスの中でaxiosのGETメソッドを利用します。mountedの中にaxiosの実行コードを記述しているため、ブラウザにアクセスするとaxiosが実行されます。console.logでresponseを指定しているのでデベロッパーツールを使って実行結果を確認することができます。}})ライフサイクルフックのmountedがわからない人はブラウザからページにアクセスした際に自動で処理させたいことを記述する場所ということで理解しておいてください。responseオブジェクトのdataプロパティに10件分のユーザデータが入っていることが確認できます。これでaxiosのGETメソッドの動作確認は完了です。console.logの結果を確認GETメソッドはデータを取得してくるだけの処理なので、その後はvue.jsを使用してブラウザに表示させます。Vueインスタンスのdataプロパティに取得したデータ(response.data)を保存するusersを追加します。response.dataをusersに入れるように変更を行います。}})これだけではブラウザに表示されることはできないのでvue.jsのv-forディレクティブを使います。v-forによりuserオブジェクトを個別に取り出すことができます。取り出したusersオブジェクトのuser.nameのみ表示させています。user.emailでも構いません。}}</li></ul>axiosで取得したデータv-forで表示GETメソッドにフィルターをかけるユーザ一覧から名前を使って検索を行いたい場合は、ある名前のユーザの情報のみ取得できる処理が必要になります。その場合はパラメーターをつけることで解決することができます。Reichertという名前の人だけ情報を取得することができます。console.log(response))パラメータオプションを使っても同じことができます。console.log(response))POSTメソッドによる新規作成axiosのPOSTメソッドを使うと新規にデータを登録することが可能です。POSTの場合はGETとは違い、データを作成するのに必要な項目と値の組を設定する必要があります。POSTメソッドの書式は下記のようになります。lastNameの項目があるデータを追加しようとする場合は、下記のように設定する項目と値の組を設定します。2つ以上の項目がある場合は同様の方法で必要な情報すべての組を追加します。});WEBの場合、新規データを追加する場合はユーザに入力してもらうことが大半だと思うのでinput要素を追加しそこで入力した情報で作成を行います。vue.jsを利用するので、input要素にv-modelで新しいdataのnameを設定し、作成ボタンにv-onディレクティブでclickイベントを設定します。ボタンを押すとcreateNewUserメソッドが実行されます。</div>Vue側ではnameと新たにmethodsプロパティ、createNewUserメソッドを追加します。}})JSONPlaceholderはPOSTメソッドを使って動作確認は行うことができますが、ユーザを追加したからといってサーバ上のデータが10から11に増えるわけではありません。その代わり、追加したデータはresponse.dataの中に入れられて戻ってきます。JSONPlaceholderの場合は追加したユーザを戻すという仕様です。他のサービスの場合ではどのような情報が戻ってくるのか確認する必要があります。その戻ってきたデータを下記のコードで現在のusersの先頭に追加しています。Doeがリストの一番上に表示されます。input画面で入力したユーザ情報を追加DELETEメソッドによるデータの削除axiosのDELETEメソッドを利用して、データの削除方法を確認します。GETメソッドとは異なりDELETEするデータを識別するIDが必要となり書式は下記のとおりです。});各リストの行に削除ボタンをつけて、ボタンを押すとdeleteUserメソッドが実行できるように変更を行います。引数には削除するユーザを識別するためのuserのidを設定します。v-on:click="deleteUser(user.id)">削除</button></li>deleteUserメソッドを下記のように追加します。クリックを押してもブラウザ上のデータは変化はありません。サーバ上のデータも実際にはデータの削除は行われません。DELETEメソッドが成功したことのみデベロッパーツールのログで確認することができます。DELETEメソッドの場合はresponse.dataには何も入っていません。},削除ボタンをクリックするとdeleteメソッドが実行PUTメソッドによるユーザの更新axiosのPATCHメソッドを利用して、データの更新方法を確認します。PATCHでは既存のデータの上書きを行うので、更新したい項目と値の組を指定する必要があります。更新するユーザを識別するIDも必須となります。});更新の場合はvue.js側の設定が少し複雑になり、axiosの動作確認からは離れてしまうことも考えられるので、Vueのマウント時にidが1のユーザの更新を行います。PATCHの場合はJSONPlaceholderでは更新したユーザの”全情報”が戻ってくるので、その情報をブラウザに表示させるためにunshiftを利用しています。}Responseの中身の確認これまでresponse.dataの中身にだけ注目してきましたが、responseに含まれる他のデータも確認しておく必要があります。configがあります。statusだけに注目すればGETメソッドで処理が成功した場合はstatusコード200に戻され、POSTメソッドの場合はstatusコード201が戻されることが確認できます。console.log(response))}エラーについてaxiosの実行時にエラーが発生した場合のcatchの処理について何も言及してきませんでしたが、意図的にエラーを発生させて動作を確認しておきましょう。URLが間違えた時はリクエスト処理は正常に行うことができません。その場合はcatchに記述した内容が実行されます。そのような場合はブラウザだけを見てもデータが表示されないだけで何が行っているのかわかりません。エラーが発生していることをブラウザに表示できるようにコードを更新します。VueのdataプロパティにerrorFlagを追加します。},errorFlagがtrueの時だけメッセージが表示されるようにv-showディレクティブを使用します。v-show="errorFlag">サーバとの通信にエラーが発生しています</p>エラーが発生してcatchの処理に行った場合のみerrorFlagをtrueに変更します。)間違ったURLに変更すると404エラーが発生するので画面上部にエラーメッセージが発生します。errorが発生した場合ここでは簡単に説明をしましたが、axiosは非常に使いやすいので、処理が失敗することはないのではという錯覚で使ってしまいがちですがエラーが発生した際にどのような処理を行うかをしっかり考える必要があります。