Nuxt.js의 axios를 초로 모의하는 npm 모듈의 입문 샘플

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