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

1 vue.js+axiosの使える環境を構築
2 JSONPlaceholder
3 axiosの使用方法
4 リクエストの設定
- 4.1 baseURLの設定
- 4.2 Headerの設定
5 Interceptorsの設定
- 5.1 Requestでの設定
- 5.2 responseでの設定
6 ファイルアップロードの進捗確認

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

mounted:funciton()をmounted()に書き換えることができます。

【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メソッドにフィルターをかける

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

下記のように指定を行えば、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要素を追加しユーザが入力した情報を利用してPOSTリクエストを送信します。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側では新たにdataプロパティ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メソッドを使って動作確認は行うことができますが、ユーザを追加したからといってサーバ上のデータが追加されるわけではありません。その代わり、追加したデータはresponse.dataの中に入って戻ってきます。JSONPlaceholderの場合は追加したユーザを戻すという仕様です。通常のサービスの場合ではどのような情報が戻ってくるのか確認して処理を行う必要があります。

その戻ってきたデータをunshiftメソッドを使って現在のusersの先頭に追加しています。


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

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

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

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>

methodsに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))
  }

ここまでの説明でaxiosを利用したGET, DELETE, POST, PATCHメソッドの方法を理解することができました。

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の処理ではエラーが発生しませんでしたが通常は必ずエラーが発生します。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は非常に使いやすいので処理が失敗することはないのではという錯覚で使ってしまいがちですがエラーが発生した際にどのような処理を行うかをしっかり考える必要があります。

errorについてはerror.response以外にもerror.name, error.message, error.request, JSON.stringify(error)などいろいろな取得方法があるので一度確認をしてくみてください。


.catch((error) => {
  console.log(error);
  console.log(JSON.stringify(error));
  console.log(error.name);
  console.log(error.message);
  console.log(error.request);
  console.log(error.response);
});

URLの間違いやネットワークに障害が発生してサーバに送信できない場合はerror.responseはundefinedになります。

リクエストの設定

ここまではget, postなどリクエストに関する動作確認の説明を行ってきましたがそれ以外にリクエストに関する設定を行うことができます。利用頻度が高く各所で利用されている設定を中心に説明を行なっています。

baseURLの設定

本文書は短いコードなのでコード中にアクセス先であるhttps://jsonplaceholder.typicode.com/を何度も記述することはありませんでしたがアプリケーションを構築する場合に何度も同じURLを記述するのは冗長になります。axiosではdefaultsでアクセスするドメインのURLを設定することができます。


axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';

baseURLを設定した場合はgetメソッドを実行する場合にbaseURLで設定したURLは省略することができます。


mounted() {
  axios
    .get('/users') //baseURLを設定
    .then((response) => (this.users = response.data))
    .catch((error) => {
      console.log(error);
    });
},

Headerの設定

認証に利用するTokenなどをHeaderに設定したい場合があります。defaults値に設定することでaxiosでリクエスト毎にヘッダーに設定をする必要がなくなります。token_idにはサーバから取得したトークン情報を保存します。


axios.defaults.headers.common['Authorization'] = `Bearer token_id`;

Interceptorsの設定

axiosからリクエストを送信する前、またサーバからレスポンスが戻ってきた際にRequest, Responseオブジェクトに対して処理を追加することができます。

Requestでの設定

例えばリクエストの設定内容を確認したい場合は下記のように記述することで確認することができます。


axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
axios.interceptors.request.use((config) => {
  console.log(config)
  return config;
});

interceptorsを利用してaxiosの設定情報を確認しています。configの中にはbaseURLの内容も確認することができます。

設定は見るだけではなく設定することも可能です。baseURLの設定をinterceptorsの中で行ってみます。


axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
axios.interceptors.request.use((config) => {
　　　　config.baseURL = 'https://test.com';
  console.log(config)
  return config;
});

baseURLが上書きされていることが確認できます。https://test.comにはアクセスできないのでエラーにはなります。


axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
axios.interceptors.request.use((config) => {
　　　　config.baseURL = 'https://test.com';
  console.log(config)
  return config;
});

responseでの設定

responseではステータスコードなどサーバ側から戻ってきた情報を確認することができます。


axios.interceptors.response.use((response) => {
  console.log(response);
  return response;
});

responseは認証が行われている環境で認証に失敗しステータスコード401(Unauthorized)が戻ってきた場合にlogout処理を行うといった使い方があります。各レスポンスのステータスコードを確認することでそれぞれのコードに応じた処理を実装することができます。


axios.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response.status === 401) {
      //logoutの処理を記述する
    }
    return Promise.reject(error);
  }
);

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

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) + '%';