Vue.js Axiosについて学ぶ①

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

<strong>今回はVue2での実装です。


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

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

##インストール
```terminal:npm
npm install axios
```

```terminal:yarn
yarn add axios
```

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

今回はcdnで導入します。

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

GET通信をaxiosでするにはaxios.getメソッドを使用します。
- <strong>第一引数にパラメータ付きのURLを指定して、
- .then()で通信が成功した際の処理を書きます。
- .catchでエラー時の処理を書きます。
- .finally()は通信が成功しても失敗しても常に実行されます。</strong>


```vuejs: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](https://jsonplaceholder.typicode.com/)

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

```vuejs: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が実行されるようにしています。

[![Image from Gyazo](https://i.gyazo.com/fe99c4e8717b4e02a9421c20fbd98f52.png)](https://gyazo.com/fe99c4e8717b4e02a9421c20fbd98f52)

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

次に

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

```vuejs: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:html
<div id="app">
  <ul v-for="user in users">
    <li >{{ user.name }}</li>
    <li>{{ user.email }}</li>
  </ul>
</div>
```


<p class="codepen" data-height="356" data-theme-id="light" data-default-tab="js,result" data-user="rm5912" data-slug-hash="gOgJNBj" style="height: 356px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js Axios traning2">
  <span>See the Pen <a href="https://codepen.io/rm5912/pen/gOgJNBj">
  Vue.js Axios traning2</a> by morioka (<a href="https://codepen.io/rm5912">@rm5912</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

```vuejs:
axios.get('https://jsonplaceholder.typicode.com/users?name=Mike Braun')
          .then(response => this.users = response.data)
          .catch(error => console.log(error))
```
####パラメータオプションを使う
```vuejs: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メソッドを使うことで新規にデータを登録することができます。
第二引数に送信したいデータを指定することで送信することができます。

```vuejs: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イベントが実行されます。

<p class="codepen" data-height="347" data-theme-id="light" data-default-tab="js,result" data-user="rm5912" data-slug-hash="dyNEBrJ" style="height: 347px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js Axios traning3">
  <span>See the Pen <a href="https://codepen.io/rm5912/pen/dyNEBrJ">
  Vue.js Axios traning3</a> by morioka (<a href="https://codepen.io/rm5912">@rm5912</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js">
</script>

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

>[unshift,shift,pop,pushが混乱するので、絵で整理した](https://maeharin.hatenablog.com/entry/20130122/unshift_shift_pop_push)

>参考サイト
[vue.jsを使ってaxiosを学ぶ](https://reffect.co.jp/vue/vue-axios-learn#POST)
[axiosライブラリを使って、柔軟にHTTP通信を行う](https://www.yoheim.net/blog.php?q=20170801)
[【Ajax】axiosを使って簡単にHTTP通信](https://www.willstyle.co.jp/blog/2751/)
[axiosの使い方まとめ (GET/POST/例外処理)](https://www.sukerou.com/2019/05/axios.html)