【Nuxt.js】Axios Mock が便利！

honda 2024年10月4日

みなさんこんにちは。どんぶラッコです。

今回はAxios Mock をご紹介したいと思います！

「擬似的に$axiosモジュールでAPI連携をしたい…でも外部にサーバ立てるのは面倒臭いなあ…」

なんて時に便利ですよ♪

Axios Mock を使う

下記のQiitaがとても参考になります(というか作者様。。)
RESTfulな「axios-mock-server」の使い方

https://github.com/m-mitsuhide/axios-mock-server

yarn add axios
yarn add axios-mock-server --dev

mocksというディレクトリを作る

mkdir mocks

そして、試しに mocks/users/_userId.js なんてファイルを作ってみます。

const users = [{ id: 0, name: 'foo' }]

export default {
  get ({ values }) {
    return [200, users.find(user => user.id === values.userId)]
  }
}

そして、ビルド。

$ node_modules/.bin/axios-mock-server --build
mocks/$mock.js was built successfully.

ちなみに、--watchプロパティも使えます！

node_modules/.bin/axios-mock-server --build --watch

Nuxt.jsのプラグインとして$mock.js を読み込ませるようにするため、下記の設定を行います。

まず、plugins/mock.jsを作成し、下記を記述

import mock from '~/mocks/$mock'

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

その後、nuxt.config.jsに下記を追記します。

export default {
  plugins: ['@/plugins/mock']
}

これで完成！あとは各コンポーネントでこのように呼び出せるようになります。

async asyncData ({ $axios, params }) {
  const id = params.id
  const data = await $axios.$get(`/users/${id}`)
  return { data }
}

// this.data で呼び出せるようになる

// TypeScriptの場合...

import { Context } from '@nuxt/types'
import Vue from 'vue'

export default Vue.extend({
  async asyncData ({ app, $axios }:Context): Promise<any> {
    const res = await $axios.get('/users/0')
    return { menus: res.data }
  }
})

簡単なAPI連携をテストする時なんかに便利ですね！

ぜひ使ってみてください♪