vue.jsを使ってaxiosを学ぶ | アールエフェクト

1 vue.js+axiosの使える環境を構築
2 JSONPlaceholder
3 axiosの使用方法
4 ファイルアップロードの進捗確認

vue.js+axiosの使える環境を構築

vue.jsを使ってaxiosの使用方法を学ぶことが目的の場合はcdnを使うのが一番はやく簡単です。今回は下記のHTMLを元にaxiosの動作確認を行っていきます。ファイル作成後はブラウザでアクセスしHello Axiosが表示されることを確認してください。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>vueを使ってaxiosを学ぶ</title>
</head>

<body>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Axios'
  }
})
</script> 
</body>
</html>

JSONPlaceholder

自社（個人）以外が運営している外部のサーバからaxiosを使ってデータを取得することができれば、内部/外部問わずどのようなサービスからでもデータを取得することに対する技術的不安がなくなります。そのため今回は無料の外部サービスであるJSONPlaceholderを使用します。

JSONPlaceholderはFake online REST API for developersと説明されている通り、開発者がREST APIの動作確認をオンラインで行うためのサイトです。このサービスを利用すればaxiosを動作確認をするために事前にデータを準備する必要がありません。

axiosの使用方法

axiosとは

axiosはPromiseベースのHTTP ClientライブラリでGETやPOSTのHTTPリクエストを使ってサーバからデータの取得、サーバのデータの更新を行うことができます。

GETメソッドによるデータ取得

JSONPlaceholderには、6つのリソースが準備されています。一番数の少ないusersから情報を取得してみましょう。

ブラウザからhttps://jsonplaceholder.typicode.com/usersにアクセスしてもusersのデータを確認することができます。

axiosのGETメソッドの書式は下記のとおりです。getの引数にURLを入れるだけでURLに対してGETリクエストを送ることができます。リクエスト後に戻される値はすべてresponseの中に保存されます。


axios.get('/user?ID=12345')
  .then(function (response) {
 // handle success(axiosの処理が成功した場合に処理させたいことを記述)
    console.log(response);
  })
  .catch(function (error) {
 // handle error(axiosの処理にエラーが発生した場合に処理させたいことを記述)
    console.log(error);
  })
  .finally(function () {
 // always executed(axiosの処理結果によらずいつも実行させたい処理を記述)
  });

Vueインスタンスの中でaxiosのGETメソッドを利用します。mountedの中にaxiosの実行コードを記述しているため、ブラウザにアクセスするとaxiosが実行されます。console.logでresponseを指定しているのでデベロッパーツールを使って実行結果を確認することができます。


new Vue({
  el: '#app',
  data: {

  },
  mounted :function(){
    axios.get('https://jsonplaceholder.typicode.com/users')
          .then(response => console.log(response))
          .catch(response => console.log(response))
  }
})

ライフサイクルフックのmountedがわからない人はブラウザからページにアクセスした際に自動で処理させたいことを記述する場所ということで理解しておいてください。

GETメソッドにフィルターをかける

ユーザ一覧から名前を使って検索を行いたい場合は、ある名前のユーザの情報のみ取得できる処理が必要になります。その場合はパラメーターをつけることで解決することができます。

下記のように指定を行えば、Glenna Reichertという名前の人だけ情報を取得することができます。


    axios.get('https://jsonplaceholder.typicode.com/users?name=Glenna Reicher')
          .then(response => this.users = response.data)
          .catch(response => console.log(response))

パラメータオプションを使っても同じことができます。


    axios.get('https://jsonplaceholder.typicode.com/users',
            {
              params: {
                name: 'Glenna Reichert'
              }
            })
          .then(response => this.users = response.data)
          .catch(response => console.log(response))

POSTメソッドによる新規作成

axiosのPOSTメソッドを使うと新規にデータを登録することが可能です。POSTの場合はGETとは違いデータを作成するのに必要な項目と値の組を設定する必要があります。

POSTメソッドの書式は下記のようになります。firstName, lastNameの項目を持つデータを追加しようとする場合は下記のように設定する項目と値の組を設定します。2つ以上の項目がある場合は同様の方法で必要な情報すべての組を追加します。


axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

WEBアプリケーションの場合を構築する場合、新規データを追加する場合はユーザに入力してもらうことが大半だと思うのでinput要素を追加しユーザが入力した情報で作成を行います。vue.jsを利用するので、input要素にv-modelで新しいdataのnameを設定し、作成ボタンにv-onディレクティブでclickイベントを設定します。ボタンを押すとcreateNewUserメソッドが実行されます。


  <div id="app">
  <input v-model="name"><br>
  <button v-on:click="createNewUser">作成</button>
  <ul>
    <li v-for="user in users">{{ user.name }}</li>
  </ul>
  </div>

Vue側ではnameと新たにmethodsプロパティ、createNewUserメソッドを追加します。


new Vue({
  el: '#app',
  data: {
    users: [],
    name: ''
  },
  methods : {
    createNewUser: function(){
     axios.post('https://jsonplaceholder.typicode.com/users',{
            name: this.name
           })
          .then(response => this.users.unshift(response.data))
          .catch(response => console.log(response))     
    }
  },
  mounted :function(){
    axios.get('https://jsonplaceholder.typicode.com/users')
          .then(response => this.users = response.data)
          .catch(response => console.log(response))
  }
})

JSONPlaceholderはPOSTメソッドを使って動作確認は行うことができますが、ユーザを追加したからといってサーバ上のデータが10から11に増えるわけではありません。その代わり、追加したデータはresponse.dataの中に入って戻ってきます。JSONPlaceholderの場合は追加したユーザを戻すという仕様です。他のサービスの場合ではどのような情報が戻ってくるのか確認する必要があります。

その戻ってきたデータを下記のコードで現在のusersの先頭に追加しています。


then(response => this.users.unshift(response.data))

inputに名前を入力して、作成ボタンを押すと入力フォームで入力したJohn Doeがリストの一番上に表示されます。

追加したユーザはどこかに保存されているわけではないのでブラウザをリロードすると消えます。

DELETEメソッドによるデータの削除

axiosのDELETEメソッドを利用して、データの削除方法を確認します。GETメソッドとは異なりDELETEするデータを識別するIDが必要となり書式は下記のとおりです。


axios.delete('/user/id')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });

各リストの行に削除ボタンをつけて、ボタンを押すとdeleteUserメソッドが実行できるように変更を行います。引数には削除するユーザを識別するためのuserのidを設定します。


<li v-for="user in users">{{ user.name }}:<button v-on:click="deleteUser(user.id)">削除</button></li>

deleteUserメソッドを下記のように追加します。

クリックを押してもブラウザ上のデータは変化はありません。また、サーバ上のデータも実際にはデータの削除は行われません。DELETEメソッドが成功したことのみデベロッパーツールのログで確認することができます。DELETEメソッドの場合はresponse.dataには何も入っていません。


    deleteUser: function(id){
      axios.delete('https://jsonplaceholder.typicode.com/users/' + id)
          .then(response => console.log(response))
          .catch(response => console.log(response)) 
    },

PUTメソッドによるユーザの更新

axiosのPATCHメソッドを利用して、データの更新方法を確認します。PATCHでは既存のデータの上書きを行うので、更新したい項目と値の組を指定する必要があります。また更新するユーザを識別するIDも必須となります。


axios.patch('/user/id',{
   firstName: 'Jone',
   lastName : 'Dow'
  })
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });

更新の場合はvue.js側の設定が少し複雑になり、axiosの動作確認からは離れてしまうことも考えられるので、Vueのマウント時にidが1のユーザの更新を行います。PATCHの場合はJSONPlaceholderでは更新したユーザの”全情報”が戻ってくるので、その情報をブラウザに表示させるためにunshiftを利用しています。


  mounted :function(){
    axios.patch('https://jsonplaceholder.typicode.com/users/1',{
        name: 'John Doe'
      })
      .then(response => this.users.unshift(response.data))
      .catch(response => console.log(response))
  }

Responseの中身の確認

これまでresponse.dataの中身にだけ注目してきましたが、responseに含まれる他のデータも確認しておく必要があります。

dataだけではなく、status, headers, statusText, configがあります。statusだけに注目すればGETメソッドで処理が成功した場合はstatusコード200に戻され、POSTメソッドの場合はstatusコード201が戻されることが確認できます。


axios.get('https://jsonplaceholder.typicode.com/users')
      .then(response => {
        console.log(response.data)
        console.log(response.status)
        console.log(response.headers)
        console.log(response.statusText)
        console.log(response.config)
      })
      .catch(response => console.log(response))
}

エラーについて

axiosの実行時にエラーが発生した場合のcatchの処理について何も言及してきませんでしたが、意図的にエラーを発生させて動作を確認しておきましょう。

URLが間違えた時はリクエスト処理は正常に行うことができません。その場合はcatchに記述した内容が実行されます。そのような場合はブラウザだけを見てもデータが表示されないだけで何が行っているのかわかりません。エラーが発生していることをブラウザに表示できるようにコードを更新します。

VueのdataプロパティにerrorFlagを追加します。


  data: {
    users: [],
    name: '',
    errorFlag: false
  },

errorFlagがtrueの時だけメッセージが表示されるようにv-showディレクティブを使用します。


  <div id="app">
    <p v-show="errorFlag">サーバとの通信にエラーが発生しています</p>

エラーが発生してcatchの処理に行った場合のみerrorFlagをtrueに変更します。


axios.get('https://jsonplaceholder.typicode.com/user')
      .then(response => this.users = response.data)
      .catch(response =>{
        console.log(response)
        this.errorFlag = true;
      }
   )

間違ったURLに変更すると404エラーが発生するので画面上部にエラーメッセージが発生します。

ここでは簡単に説明をしましたが、axiosは非常に使いやすいので、処理が失敗することはないのではという錯覚で使ってしまいがちですがエラーが発生した際にどのような処理を行うかをしっかり考える必要があります。

ファイルアップロードの進捗確認

axiosを利用してサーバへファイルのアップロードを行いたい場合ファイルのアップロードの進捗状況を知りたい場合にプログレスバーが利用されます。

axiosでも現在のアップロードの進捗方法を知ることができます。第3引数に下記のように設定を行い、progressEventでファイル全体のサイズprogressEvent.totalとアップロードされたサイズprogressEvent.loadedで確認することができます。


const form = new FormData();

form.append('file',event.dataTransfer.files[0]);

axios.post('/api/karte_file',form,{
	onUploadProgress: progressEvent => {
		console.log(progressEvent.loaded)
		console.log(progressEvent.total)
	}
});

この値を割ると全体に対する現在の進捗具合をしることができます。


ratio = Math.floor((progressEvent.loaded)*100/progressEvent.total) + '%';