axiosでGETリクエストのモックを作成する

## はじめに

[Vue + VuexでREST APIを叩いてリスト表示する方法](https://qiita.com/kazmaw/items/058ea5e222775394711b)を書くときにAPI作るの面倒で、モックでやりましたので、そのやり方をこちらに書いておきます。
先述の記事内で使用するものを作れたらOKなので、GETリクエストしたら、Todoリスト表示に必要なデータを返してくれるものだけ作成します。
POSTとかも知りたい方は、[vue-cli + axios でmock環境を雑に作ったのでメモ](https://qiita.com/qazx7412/items/b52b5e818c226f1b5a21)が非常にわかりやすいです。

※ Vue.jsのプロジェクトは作成済とします。

## 1. axiosの準備

まずはaxiosをプロジェクトに追加します。

```bash
yarn add axios
```

## 2. モック実行の準備

package.jsonのscriptsに、mockを追加して`yarn mock`でモックを利用してサーバーを起動できるようにします。

```json:package.json
  "scripts": {
     "serve": "vue-cli-service serve",                                                                                                 
     "build": "vue-cli-service build",                                                                                                 
     "mock": "vue-cli-service serve --mode mock",                                                                                                   
     "lint": "vue-cli-service lint"                                                                                      
  },
```

`--mode mock`をつけることで環境変数の読み込みファイルを`.env.development`から`.env.mock`に変えることが出来きるので、それぞれ、ファイルを追加して以下のように記述します。

```.env.mock
VUE_APP_USE_MOCK=true
```

```dot:.env.development
VUE_APP_USE_MOCK=false
```

このとき、命名規則として、頭に`VUE_APP`をつけるというのがありますのでご注意ください。
デフォルトで`yarn serve`すると、サーバーが立ち上がってHelloWorldコンポーネントが表示されるので、以下のように修正して表示してみます。

```vuejs:HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>モックかどうか{{ env }}</h2>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data () {
    return {
      env: null
    }
  },
  mounted() {
    this.env = process.env.VUE_APP_USE_MOCK
  }
}
</script>
```

これで、`yarn serve`, `yarn mock`を実行すると、環境変数の読み込みが切り替わっていることが確認できるかと思います。

## 3. モックの実装

これで、実行の準備が整いましたので、モックを実装していきます。

```js:apis/api.js
import axios from 'axios';
import mock from './mock/api';

export const client = axios.create({
  baseURL: 'https://test.com/url/of/your/api',
})

// モック起動
if (JSON.parse(process.env.VUE_APP_USE_MOCK)) {
  mock.run(client)
}

export default {
  /**
   * Todoリスト取得API
   * 結果はPromiseを返してハンドリングする
   * @param {Object} params パラメータ
   */
  getTodos (params) {
    return client.get('/todos', params);
  }
}
```

次に、↑で`import mock from './mock/api'`としているので、そのファイルを追加してmockを実装します。

```js:mock/api.js
import MockAdapter from 'axios-mock-adapter';

let data = [
  { id: '1', body: '朝ごはん食べた' },
  { id: '2', body: '昼ごはん食べた' },
  { id: '3', body: '夜ごはん食べた' },
];

export default {
  run: client => {
    const mock = new MockAdapter(client);
    mock.onGet('/todos').reply(200, data);
  }
}
```

## 4. 実行を確認

実際に実行できるか確認します。
これもHelloWorldコンポーネントでやってしまいましょう。

```vuejs:HelloWorld.vue
<template>
  <div class="hello">
    <ul>
      <li v-for="todo in todos" :key="todo.id">{{ todo.title }}</li>
    </ul>
  </div>
</template>

<script>
import Api from '../apis/api.js';
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data () {
    return {
      todos: null,
    }
  },
  mounted() {
    this.getTodos();
  },
  methods: {
    getTodos () {
      Api.getTodos()
        .then(response => {
          this.todos = response.data;
        })
        .catch(error => {
          console.error(error);
        })
    }
  }
}
</script>
```

これで、モックからデータを返せるようになりました。

## 参考
- [vue-cli + axios でmock環境を雑に作ったのでメモ](https://qiita.com/qazx7412/items/b52b5e818c226f1b5a21)
- [vue-cliで実行時の環境変数を切り替える方法](https://conta.hatenablog.com/entry/2019/02/25/154310)