Vue.js Axiosについて学ぶ①

#はじめに
RailsやVue.jsなどを学んできましたが
データベースとのやりとりの中でaxiosを学ぶ必要があるとわかり
学んだことをまとめておきます。

今回はVue2での実装です。

#axiosとは
axiosとはブラウザやnode.js上で動くPromiseベースのHTTPクライアントライブラリでGETなどのHTTPリクエストを使ってサーバーからデータの取得、サーバーのデータの更新をすることができます。
JQueryでいうAjaxで、非同期にHTTP通信を容易に実装できるとのこと。
Vue.jsでは非同期通信を行うのにaxiosを使うのがスタンダード。

読み方は「アクシオス」。

##インストール

npm

npm install axios

yarn

yarn add axios

cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"><script>

今回はcdnで導入します。

#GETメソッドによるデータ取得
GETメソッドはHTTP通信の外部から情報を取得する基本のメソッドです。

GET通信をaxiosでするにはaxios.getメソッドを使用します。

• 第一引数にパラメータ付きのURLを指定して、
• .then()で通信が成功した際の処理を書きます。
• .catchでエラー時の処理を書きます。
• .finally()は通信が成功しても失敗しても常に実行されます。

javascript

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の結果関係なくいつも実行させたいこと)
});

getの引数にURLを入れるだけでURLに対してGETリクエストを送ることができます。
リクエスト後は戻る値は全てresponseの中に保存されます。

レスポンスには以下のものが入ります。

// レスポンスデータ
response.data
// ステータスコード
response.status
// ステータステキスト
response.statusText
// レスポンスヘッダ
response.headers
// コンフィグ
response.config

###JSONPlaceholder
無料で使えるREST APIの動作確認をオンラインで行うためのサイトです。
axiosで動作確認するために事前にデータを準備する必要がなくなります。

JSONPlaceholder

今回はこちらを利用していきます。
まずはgetメソッドでJSONPlaceholderのusersファイルをリクエストして取得できるかやってみます。

javascript

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

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

mountedでブラウザで読み込んだときにaxiosが実行されるようにしています。

情報を取得できています。

次に

Vueインスタンスのdatプロパティに取得したデータ(responce.data）を保存するusersを追加します。

javascript

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

HTMLにv-forディレクティブを使い、データの内容を表示させます。

html

<div id="app">
  <ul v-for="user in users">
    <li >{{ user.name }}</li>
    <li>{{ user.email }}</li>
  </ul>
</div>

See the Pen Vue.js Axios traning2 by morioka (@rm5912) on CodePen.

##URLパラメータを指定
####URLに直接記述

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

####パラメータオプションを使う

javascript

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

#POSTメソッドによる新規作成
axios.postメソッドを使うことで新規にデータを登録することができます。
第二引数に送信したいデータを指定することで送信することができます。

javascript

axios.post('/https://jsonplaceholder.typicode.com/users', {
    firstName: 'Tomas',
    lastName: 'Waterpool'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

先程のコードに新規データを登録できるようにinput要素を追加して入力、作成できるようにします。
v-modelで新しいdataのnameを設定して、作成ボタンを押すとcreateNewUserメソッドがv-onディレクティブのclickイベントが実行されます。

See the Pen Vue.js Axios traning3 by morioka (@rm5912) on CodePen.

unshiftメソッドを使い、先頭に挿入しています。

unshift,shift,pop,pushが混乱するので、絵で整理した

参考サイト
vue.jsを使ってaxiosを学ぶ
axiosライブラリを使って、柔軟にHTTP通信を行う
【Ajax】axiosを使って簡単にHTTP通信
axiosの使い方まとめ (GET/POST/例外処理)