axiosとaxios-mock-adapterでmock化する

jQueryjquery-mockjax で作られていたajaxとそのmock。

脱jQuery化の一歩として、axios を導入し、axios-mock-adapter を使ってAPIリクエストをmock化し始めました。

ざっくりサンプルはこんな感じ。

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

// delayResponseでmockの返却タイミングを遅らせる
const mock = new MockAdapter(axios, { delayResponse: 500 });

mock.onGet('/users').reply(config => {
  // replyの中をfunctionにしておけば何にどんなmockを返したのかログが出せる
  const { method, url } = config;
  const data = {
    users: [
      { id: 1, name: 'John Smith' }
    ]
  };
  console.log(method, url, data)

  return [200, data]
});

基本的にはaxiosのインスタンスにadapterをかませるだけなのですごく簡単。

mockのdataをすぐに返却してしまうと、ローディング等が見えないので、delayResponseで遅らせてあげると、本当に通信しているように見えるのでおすすめ。

axios/axios

axios - Promise based HTTP client for the browser and node.js

ctimmerm/axios-mock-adapter

axios-mock-adapter - Axios adapter that allows to easily mock requests

以上

JavaScript