Mock.js 生成随机数据 拦截 Ajax 请求

Question

前端开发过程中，总是会有一些 Ajax 请求，之前的做法是自己新建一些 JSON 文件，然后访问本地的文件，这么做有个很大的问题就是不够灵活，而且还需要频繁切换 url，现在有了 Mock.js 拦截 Ajax 请求，就更加方便的构造你需要的假数据。

特点

前后端分离

让前端攻城师独立于后端进行开发。

增加单元测试的真实性

通过随机数据，模拟各种场景。

开发无侵入

不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。

用法简单

符合直觉的接口。

数据类型丰富

支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

方便扩展

支持支持扩展更多数据类型，支持自定义函数和正则。

使用方法

1、安装 Mockjs

npm install mockjs --save-dev

2、在项目中创建 mock.js，并写一个简单的返回示例：

// 引入 mockjs
import Mock from 'mockjs'
// 使用 mockjs模拟数据
Mock.mock('/api/proxy/query', {
  "ret":0,
  "data":{
    "mtime": "@datetime",//随机生成日期时间
    "score|1-800": 800,//随机生成1-800的数字
    "rank|1-100": 100,//随机生成1-100的数字
    "stars|1-5": 5,//随机生成1-5的数字
    "nickname": "@cname",//随机生成中文名字
  }
});

3、main.js 里面引入该文档

import './js/mock'

4、vue 文件中调用 mock.js 中模拟的数据接口，这时返回的 response 就是 mock.js 中用 Mock.mock('url, data) 中设置的 data 了。

var url = '/api/proxy/query';
this.$axios.get(url).then(response => {
  // code
}).catch(error => {
  // code
})

设置延时返回数据

任何 API 的请求都是有延迟，所以为了增加真实性，我们可以设置一定的延迟返回数据

//延时400s请求到数据
Mock.setup({
  timeout: 400
})
//延时200-600毫秒请求到数据
Mock.setup({
  timeout: '200-600'
})

更多使用方法请参见：Mock.js 中文文档