2021-07-25

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);
  });
});

たむたむの日記