Nuxt.jsのaxiosを秒でモックするnpmモジュールの入門サンプル

7873 ワード
axios JavaScript es6 nuxt.js JavaScript テキストリンク

Nuxt.jsって環境構築ラクだからついAPIの実装を待たずにフロント開発を始めたくなりますよね！

事前準備

Nuxt.jsとAxios ModuleがインストールされたNodeプロジェクトを用意します。
個人的にはcreate-nuxt-appでaxiosも同時にインストールするのをおススメします。
必要な構成を簡単に作れます。

インストール

$ npm i axios-mock-server

プラグイン作成

Nuxt独自の $axios をモック化します。

plugins/mock.js
import mock from '~/mocks/$mock.js' // ビルド時に自動生成されるファイル

export default ({ $axios }) => mock($axios)

Nuxt.jsの設定ファイル

作成したプラグインのパスを追記します。

nuxt.config.js
export default {
  plugins: ['~/plugins/mock.js']
}

APIエンドポイント定義

mocks/users.js のファイルを作成し /users のGETとPOSTを定義します。

mocks/users.js
const users = [{ id: 0, name: 'taro' }]

export default {
  get: () => [200, users], // 返り値は [status, body?, headers?]

  post: ({ data }) => {
    users.push({
      id: users.length,
      name: data.name
    })

    return [201]
  }
}

普段通りにaxiosを使う

pages/index.vue
<template>
  <div />
</template>

<script>
export default {
  async mounted() {
    await this.$axios.$post('/users', { name: 'yoko' })

    const users = await this.$axios.$get('/users')
    console.log(users) // [{ id: 0, name: 'taro' }, { id: 1, name: 'yoko' }]
  }
}
</script>

npmスクリプト

package.json
{
  "scripts": {
    "dev": "axios-mock-server -b && nuxt",
    "build": "axios-mock-server -b && nuxt build",
    "start": "axios-mock-server -b && nuxt start",
    "generate": "axios-mock-server -b && nuxt generate"
  }
}

Nuxt.jsを起動

dev コマンドで mocks/$mock.js が作成され、API定義が変わる度にNuxt.jsも更新されます。

$ npm run dev

もっと詳しく

他にもモックサーバーに必要な機能はだいたい揃ってます。
RESTfulな「axios-mock-server」の使い方 - Qiita