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

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

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

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

Vue.jsのメジャーバージョンであるVue.jsのバージョン3の記述方法を追記しました。

【Vue 2の場合】


<!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>

【Vue 3の場合】


<!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://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>
        Vue.createApp({
            el: '#app',
            data(){
                return {
                    message: 'Hello Axios',
                }
            },
        }).mount('#app')
    </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メソッドによるデータ取得

GETメソッドは一番シンプルなメソッドでaxiosのみならず外部から情報を取得する際の基本になるメソッドです。通常のブラウザでサーバにアクセスする際もGETメソッドを利用しています。

JSONPlaceholderにはGETメソッドで取得することができる6つのリソースが準備されています。一番データ取得数の少ないusersから情報を取得してみましょう。

ブラウザからhttps://jsonplaceholder.typicode.com/usersにアクセスしてもusersのデータを確認することができるのでaxiosを利用する前にどのような情報が取得できるかを確認することができます。本文書ではidとnameのみ注目します。

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の処理結果によらずいつも実行させたい処理を記述)
  });

async, awaitを利用した場合は上記の基本書式と記述方法が変わり、try,catchを利用します。

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

【Vue 2の場合】


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

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

【Vue 3の場合】


Vue.createApp({
    el: '#app',
    data(){
        return {
            message: 'Hello Axios',
        }
    },
    mounted(){
        axios.get('https://jsonplaceholder.typicode.com/users')
            .then(response => console.log(response))
            .catch(error => console.log(error))
    }
}).mount('#app')

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

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

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

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


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

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


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

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

axiosのPOSTメソッドを使うと新規にデータを登録することが可能です。POSTメソッドが行えるかどうかはサーバの設定によるのでPOSTリクエストを送信する場合は事前に確認が必要です。POSTの場合はGETとは違いデータを作成するのに必要な項目と値の組を設定する必要があります。

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


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

JSONPlaceholderにページにはPOSTリクエストの受付は/postsのみしか記述されていませんが、/usersでも動作することを確認しました。/usersが使えない場合はJSONPlaceholderのガイドを確認し/postsへのPOSTリクエストで動作確認を行ってください。

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(error => console.log(error))     
    }
  },
  mounted :function(){
    axios.get('https://jsonplaceholder.typicode.com/users')
          .then(response => this.users = response.data)
          .catch(error => console.log(error))
  }
})

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(error => console.log(error)) 
    },

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.jsのマウント時のライフサイクルフックのmountedで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(error => console.log(error))
  }

Responseの中身の確認

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

responseに戻される値は送信するアプリケーションによって異なります。ここではJSONPlaceholderの場合の戻される値を確認しています。

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(error => console.log(error))
}

エラーについて

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(error =>{
        console.log(error.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) + '%';