@heroitvn/mock-api-fetch
v1.0.2
Published
Mock http request made using fetch
Downloads
6
Readme
Mock Fetch
Mock http request made using fetch
Usage
Include script file to your app
<script src="https://cdn.jsdelivr.net/npm/@heroitvn/mock-api-fetch/dist/mock-api.js"></script>
Create a mock
window.mock({
url: '/api/avatar',
callback: (req) => {
const method = req?.method;
if (method && method.toLowerCase() !== 'get') {
return {
body: `Only allow GET method`
}
}
return {
body: [
{
name: "Peg Legge",
image: {
src: "/samples/peg-legge.svg",
width: '175',
height: '175',
alt: 'people 1'
},
jobTitle: "CEO"
},
{
name: "Richard Guerra",
image: {
src: "/samples/richard-guerra.svg",
width: '175',
height: '175',
alt: 'people 2'
},
jobTitle: "CEO"
},
{
name: "Alexandra Stolz",
image: {
src: "/samples/alexandra-stolz.svg",
width: '175',
height: '175',
alt: 'people 3'
},
jobTitle: "CEO"
},
{
name: "Janet Bray",
image: {
src: "/samples/janet-bray.svg",
width: '175',
height: '175',
alt: 'people 4'
},
jobTitle: "CEO"
},
]
}
}
});
Test a mock
// expect data
fetch('/api/avatar').then(res => res.json()).then(console.log);
The data will show like that in the console.log
[
{
"name": "Peg Legge",
"image": {
"src": "/samples/peg-legge.svg",
"width": "175",
"height": "175",
"alt": "people 1"
},
"jobTitle": "CEO"
},
{
"name": "Richard Guerra",
"image": {
"src": "/samples/richard-guerra.svg",
"width": "175",
"height": "175",
"alt": "people 2"
},
"jobTitle": "CEO"
},
{
"name": "Alexandra Stolz",
"image": {
"src": "/samples/alexandra-stolz.svg",
"width": "175",
"height": "175",
"alt": "people 3"
},
"jobTitle": "CEO"
},
{
"name": "Janet Bray",
"image": {
"src": "/samples/janet-bray.svg",
"width": "175",
"height": "175",
"alt": "people 4"
},
"jobTitle": "CEO"
}
]
Have Fun!