mock简单使用

在后端兄弟接口没有写完的时候那么 mock 就体现它的价值了

- 1
yarn add mockjs

- 2
// src 文件夹下新建一个 mock 的文件夹下新建 index.js 文件
// 导入 mock 
import Mock from 'mockjs'

// 配置 mock
// ( 请求的接口, 请求方式, 请求返回的数据 )
Mock.mock(/\/api\/bar\/foo/, 'get', {
    "ret":0,
    "data":
      {
        "mtime": "@datetime",// 随机生成日期时间
        "score|1-800": 800,// 随机生成1-800的数字
        "rank|1-100":  100,// 随机生成1-100的数字
        "stars|1-5": '',// 随机生成1-5的字符串
        "nickname": "@cname",// 随机生成中文名字, "@cname" 去掉 c 那么就是英文
      }
})

// 通过Mock.mock函数模拟post请求
Mock.mock('/api/addgoods', 'post', function (option) {
    // 这里的option是请求的相关参数
    console.log(option)
  
    return Mock.mock({
      status: 200,
      message: '@cword(2)'
    })
})

// 通过Mock.mock函数模拟url带参数的请求
// 方法一：new RegExp('/api/getgoods/.*')作为mock的第一个参
// 方法二：写url正则的时候不需要括号，/\/api\/getgoods/作为mock的第一个参数
Mock.mock(/\/api\/getgoods/, 'get', function (option) {
    console.log(option)
  
     const res = /\/api\/getgoods\/(\d+)/.exec(option.url)
    //  console.log(res, 666);
  //res[0]为/\/api\/getgoods\/(\d+)/，整条url
    return Mock.mock({
      status: 200,
      message: '获取商品列表成功',
      data: {
        id: res[1],
        name: '@food()',
        price: 0.1,
        count: 100,
        img: '@dataImage(78x78)'
      }
    })
  })

// 延时200-600毫秒请求到数据
// 真实请求数据的时候是需要时间的, 不然可能会在联调的时候出现问题
Mock.setup({
    timeout: '200-600'
})

- 3
// main.js 文件下导入
import Vue from 'vue'
import App from './App.vue'

// mock 虚拟接口
import './mock/index.js'
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

- 4 
// App.vue
<template>
  <div>
    <button @click="bar(2)">点击发送请求</button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'NewtokenApp',

  data() {
    return {
      id: 1
    };
  },

  mounted() {
    
  },
  
  methods: {
    // post 请求
    // async bar() {
    //   const res = await axios.post('/api/addgoods',{
    //     params: {
    //         id: 12345
    //     }
    //   })
    //   console.log(res);
    // }  
    
    // get 请求
    async bar(id) {
      const res = await axios.get(`/api/getgoods/${id}`)
      console.log(res);
    }
  },
};
</script>

下面是详细解释