Skip to content
/ mockajax Public

easy intercept and modify XHR or fetch, mock the response.

License

Notifications You must be signed in to change notification settings

wsfe/mockajax

Repository files navigation

MockAjax

npm version Coverage Status build status npm downloads

MockAjax is used to api mock, it bases on XMLHttpRequest, so you can treat jquery or axios as http client. And MockAjax does not depend on any frame, so you can easy use it.

Remark: only support status=200

other doc: 简体中文

About MockAjax And Its History

Before backend api is finished, frontend usually need to mock by himself. Now in github some open source api platform(such as:easy-mock,yapi) provide api mock. But they can't meet all needs, such as api2 depends on api1's mock data.

The most famous mock data frame is jquery-mockjax, But it depends on Jquery, and not fit for axios and other http client. So, we need a frame to provide api mock, and it doesn't depend on any frame.

Start

Import MockAjax Frame

<script src="/dist/mockajax.min.js"></script>

**Attention:**the frame must be import before the browser send http request.

Write Your Mock Rules

Such as:

MockAjax.mock([
  {
    url: '/user/:id/:name',
    response: function(req) {
      return {
        name: req.params.name,
        id: req.params.id,
        age: req.query.age,
        country: req.query.country
      }
    }
  },
  {
    url: '/user/:name',
    response: function(req) {
      return {
        name: req.params.name,
        age: req.query.age,
        country: req.query.country
      }
    }
  },
  {
    url: '/user',
    method: 'POST',
    response: function(req) {
      return {
        name: req.body.firstName + req.body.lastName
      }
    }
  },
  {
    url: '/user',
    method: 'put',
    response: function(req) {
      return {
        name: req.body.firstName + req.body.lastName
      }
    }
  },
  {
    url: '/user/:id',
    method: 'delete',
    response: function(req) {
      return {
        id: req.params.id
      }
    }
  }
])

And now you can send any http request

axios.post('/user', {
  firstName: 'free',
  lastName: 'fish'
}).then((response) => {
  assert.equal(response.data.name, 'freefish')
}).catch(error => {
})

API Methods

MockAjax provide 3 API.

setBasePath

void MockAjax.setBasePath(/* String */ path): the method is used to set base path. Sometimes api's prefix is too long, And we don't want to write the same prefix all the time. Now it provides the function what you need. Such as: api's prefix is https://github.com/api/v1.

MockAjax.setBasePath('/api/v1')

openFetch

void MockAjax.openFetch(): the method make the fetch request to be able mock. MockAjax can not mock fetch request default. So If you want to make the fetch request to be able mock, you must invoke the method.

MockAjax.openFetch()
fetch('/user/123/freefish?age=20&country=china').then(response => {
  assert.equal(response.data.id, 123)
  assert.equal(response.data.name, 'freefish')
  assert.equal(response.data.age, 20)
  assert.equal(response.data.country, 'china')
})

beforeMock

request Mockajax.beforeMock(function(request) { return request }),set before mock action. you don't need to call the fuction, if you call it, you should return request object.

afterMock

request Mockajax.afterMock(function(response) { return response }),set after mock action. you don't need to call the fuction, if you call it, you should return response object.

mock

void MockAjax.mock(/* Array|Object */ options): the method is used to set mock rule, the argument options can be Object or Array. options:

  • url: [String | RegExp], can be Regex or normal url, and it support restful api.
  • method: [String], can be GET or POST or PUT... GET is the default value.
  • response: Object Function([/* Object */ request]): return the date what you want to mock. The method return a mock object.
    • request: the request object contain 4 objects: xhr, query(fit for arguments ?key=value), params(fit for restful api), body(contain the form data), they are all Object。

Reference

About

easy intercept and modify XHR or fetch, mock the response.

Resources

License

Stars

Watchers

Forks

Packages

No packages published