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

以上