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: 简体中文
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.
<script src="/dist/mockajax.min.js"></script>
**Attention:**the frame must be import before the browser send http request.
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 => {
})
MockAjax provide 3 API.
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')
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')
})
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.
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.
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 beGETorPOSTorPUT...GETis 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。