Remote mock data
2024-9-7 Less than 1 minute
http-request-mock
supports for using remote mock data.
 Â
Hit F12 to access Developer Tools and view the console logs.
# Mock data file
# Support for using remote mock data.
/**
* @url https://www.api.com/remote1
*
* In browser, the specified remote url must conform to the cross-domain specification.
* @remote https://jsonplaceholder.typicode.com/todos/1
*
* You can set request headers for the specified remote request
* Note: For browser, target server must confirm to Access-Control-Allow-Headers specification
* @remoteRequestHeaders abc: xyz
*
* @method get
*/
module.exports = remote => remote.responseJson;
# You can dynamically modify the data returned from the remote.
/**
* @url https://www.api.com/remote2
*
* In browser, the specified remote url must conform to the cross-domain specification.
* @remote https://jsonplaceholder.typicode.com/todos/1
*
* You can set request headers for the specified remote request
* Note: For browser, target server must confirm to Access-Control-Allow-Headers specification
* @remoteRequestHeaders abc: xyz
*
* @method get
*/
module.exports = remote => {
return {
code: 0,
msg: 'OK',
data: remote.responseJson
}
}
# Vue code
<template>
<div class="demo">
<button @click="getRemote1">GET https://www.api.com/remote1</button>
<button @click="getRemote2">GET https://www.api.com/remote2</button>
<div class="result"> {{ msg }} </div>
<div class="tips">Hit F12 to access Developer Tools and view the console logs.</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return { msg: '' }
},
methods: {
getRemote1() {
this.msg = 'loading...';
axios.get('https://www.api.com/remote1').then(res => {
this.msg = JSON.stringify(res.data);
}).catch(err => {
this.msg = err.message;
});
},
getRemote2() {
this.msg = 'loading...';
axios.get('https://www.api.com/remote2').then(res => {
this.msg = JSON.stringify(res.data);
}).catch(err => {
this.msg = err.message;
});
},
}
}
</script>
<style scoped src="./demo.css">