突然axiosのGET/POST/PUT/DELETEを丸ごとモックしたくなるときってありますよね!
axios-mock-server - GitHub
インストール
$ npm i axios axios-mock-server
APIエンドポイント定義
/users
のGETとPOSTを mocks/users.js
に定義する
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]
}
}
npmスクリプト定義
モックAPIルーティングファイルをビルドするnpmスクリプトを定義
package.json
{
"scripts": {
"mock:build": "axios-mock-server -b"
}
}
ルーティングファイルをビルド
npmコマンドで起動。 mocks/$mock.js
が生成される。
$ npm run mock:build
##axiosのモック化
環境変数を見て開発中だけaxionのモックを有効にするメインの index.js
index.js
import axios from 'axios'
import mock from './mocks/$mock.js' // ビルドで自動生成されたファイル
if (process.env.NODE_ENV === 'develop') {
mock() // axiosのモック有効化
}
(async () => {
await axios.post('/users', { name: 'yoko' })
const users = await axios.get('/users')
console.log(users.data) // [{ id: 0, name: 'taro' }, { id: 1, name: 'yoko' }]
})()
もっと詳しく
他にもモックサーバーに必要な機能はだいたい揃ってます。
RESTfulな「axios-mock-server」の使い方 - Qiita
メインのJSファイルのビルドはこの記事のスコープ外なので解説しませんでした。
webpack/parcel/browserifyあたりを普段通りに使ってください。