共计 1185 个字符，预计需要花费 3 分钟才能阅读完成。
前端工程师在做前后端分离的项目的时，有时候接口未开发完成，或者开发环境不允许使用接口，这时候就需要前端工程师自己模拟数据了，模拟数据的方式有很多种，今天给大家介绍一款 npm 包，Mock.js。
首先我们要明白 Mock.js 的本质是拦截 ajax 请求，并返回约定好的数据。数据需要根据开发者的需求结合 Mock.js 的文档来定制，下面来看一下如何使用：
引入 mock.js 和 JQuery
<script src=”js/jquery-1.12.4.min.js”></script> <script src=”http://mockjs.com/dist/mock.j…;></script>
创建模拟 Api，这里需要结合需求按照文档编写，拦截 Ajax 请求，返回测试数据，这里面需要注意的是 mock 的第一个参数，指的是我们将来发送 ajax 要请求的接口地址：
// 模拟后台
Mock.mock(‘http://api.com’, {
“user|5-10”: [{
‘name’: ‘@cname’, // 中文名称
‘age|1-100’: 100, //100 以内随机整数
‘birthday’: ‘@date(“yyyy-MM-dd”)’, // 日期
‘city’: ‘@city(true)’ // 中国城市
}]
});
发送 ajax 请求：
//JQuery 方式
$.ajax({
url: ‘http://api.com’,
dataType: ‘json’
}).done(function(data, status, xhr) {
console.log(
JSON.stringify(data, null, 4)
)
});
这里也可以用原生的 ajax 请求，只要是用 XMLhttprequest 的实例发送的请求，都会被 Mock.js 拦截，诸如 axios、vue-resurce 等等。
看一下响应结果：
{
“user”: [
{
“name”: “ 锺丽 ”,
“age”: 17,
“birthday”: “1983-11-01”,
“city”: “ 内蒙古自治区 赤峰市 ”
},
{
“name”: “ 陈艳 ”,
“age”: 25,
“birthday”: “1973-07-10”,
“city”: “ 河南省 驻马店市 ”
},
{
“name”: “ 冯霞 ”,
“age”: 59,
“birthday”: “2010-10-28”,
“city”: “ 澳门特别行政区 离岛 ”
},
{
“name”: “ 贾秀英 ”,
“age”: 63,
“birthday”: “1973-01-22”,
“city”: “ 新疆维吾尔自治区 伊犁哈萨克自治州 ”
},
{
“name”: “ 周勇 ”,
“age”: 34,
“birthday”: “1985-05-21”,
“city”: “ 湖南省 衡阳市 ”
}
]
}
以上便是 mock 的使用。
资料引用：https://www.jianshu.com/p/845…http://mockjs.com/
欢迎大家关注、转发、点击好看
