mockjs的基本使用和演示案例

什么是mockjs

mockjs可以模拟可更快的得到较为真实的数据，且可以拦截axios的接口调用，让我们的代码实现了调用接口的逻辑且得到模拟的数据，保存业务完整度。

当然模拟数据有一定的规则请参考： http://mockjs.com/

基本使用步骤

1.安装

npm i mockjs

2.配置 src/mock/index.js

import Mock from 'mockjs'

// mock的配置
Mock.setup({
  // 随机延时500-1000毫秒
  timeout: '500-1000'
})

3.使用 src/main.js

// 在入口文件mian.js中使用mockjs
 import './mock'

4.模拟接口，拦截请求

// 拦截请求，
// 第一个参数：url，使用正则去匹配
// 第二个参数：请求方式
// 第三个参数： 生成数据的函数
Mock.mock(/\/my\/test/, 'get', () => {
  return { msg: '请求测试接口成功', result: [] }
})

5.生成随机数据

// 单个数据
Mock.mock('@integer(0,7)')
// 对象数据
Mock.mock({
    id: '@id',
    name: '@ctitle(2,4)'
})

 具体规则：http://mockjs.com/examples.html

demo案例模拟接口

下面我们通过模拟 /my/test 接口，随机返回点数据，来学习使用。

首先我们安装mockjs

 安装完成后在项目src目录下创建了一个mock目录 在目录中创建了一个js文件

 在js文件中导入了mockjs并进行相关的配置，配置了需要拦截的请求

// 导入mockjs
import Mock from 'mockjs'

// mock的配置
Mock.setup({
  // 随机延时500-1000毫秒
  timeout: '500-1000'
})

// 拦截请求，
// 第一个参数：url，使用正则去匹配
// 第二个参数：请求方式
// 第三个参数： 生成数据的函数
Mock.mock(/\/my\/test/, 'get', () => {
  const arr = []
  for (let i = 0; i <= 4; i++) {
    arr.push(Mock.mock({
      // 生成唯一id 和 name
      id: '@id',
      name: '@cname'
    }))
  }
  return { msg: '获取数据成功', result: arr }
})

在main.js中使用

 到这里 接口就配置完成了，下面我们请求这个接口

    // 向mockjs发起请求
    request('/my/test', 'get').then(res => {
      console.log(res)
    })

在控制台中我们可以看到mock的数据获取成功了