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>
    &nbsp;&nbsp;
    <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">
Last update: September 7, 2024 15:58