秒でaxiosをモックするnpmモジュールの入門サンプル
5971 ワード
突然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あたりを普段通りに使ってください。
Author And Source
この問題について(秒でaxiosをモックするnpmモジュールの入門サンプル), 我々は、より多くの情報をここで見つけました https://qiita.com/m_mitsuhide/items/e0dcd0d3e37eee59bcc2著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .