Vue3でaxiosをMock化する

  • このエントリーをはてなブックマークに追加

APIのアクセスはaxiosでコールするけど、開発中はMockに差し替えるということをします。

mockにはaxios-mock-adapterを利用します。

mock.js
import MockAdapter from 'axios-mock-adapter'
const data = { world: "world" }
export default {
run(client) {
const mock = new MockAdapter(client, {delayResponse: 300})
mock.onGet("/api/hello").reply(200, data)
}
}

delayResponseを設定することで意図的に遅くすることができます。

mockの色々な書き方

直接JSONを返す

mock.onGet("/api/hello").reply(200, { hello: "world" })

関数の実行

mock.onGet("/api/hello").reply((config) => {
return [200, { hello: "world" }];
});

Queryの処理

ややこしいのは、config.paramsではないと言うことです。
/api/hello?name=taroとリクエストする場合は、正規表現で/\/api\/hello\?.*/と指定する必要があります。ここは良い感じに処理して欲しいですね…。なので、

function parseQueryString(url) {
const queryString = url.replace(/.*\?/, '')

const result = {}
if (queryString === url || !queryString) {
return result
}

const urlParams = new URLSearchParams(queryString)
urlParams.forEach((val, key) => {
if (Object.prototype.hasOwnProperty.call(result, key)) {
result[key] = [result[key], val]
} else {
result[key] = val
}
});

return result
}

mock.onGet(/\/api\/hello2?.*/).reply((config) => {
const params = parseQueryString(config.url)
return [200, { config, params }]
})

postされた内容を見る。FormDataの場合。

const formData = new FormData();
formData.append("name", "taro");
formData.append("flag1", "true");
const resp = await $client.post("/api/formPost", formData, {});
mock.onPost("/api/post").reply(config => {
const formData = config.data
const name = formData.get("name")
...
})

PostされたJSONを見る

const resp = await $client.post("/api/postJson", {
name: "hello",
message: "world",
});

config.dataは文字列なのでJSON.parseする。

mock.onPost("/api/postJson").reply((config) => {
const data = JSON.parse(config.data);
return [200, { data }];
});

わざとDelayさせる

delayResponseの全体設定とは別に、個別にDelayさせる。
Promiseを返して、setTimeoutが終わった時にresolveする。

mock.onGet("/api/delayHello").reply((config) => {
const delay = 5000;
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([200, { hello: "world" }]);
}, delay);
});
});

関連記事

参考情報