在项⽬中接⼊YApi的mock服务
通常⼀个需求过完TD之后，后端提供哪些接⼝，每个接⼝返回的字段也就已经确定了，接下来就是前后端并⾏的开发。但经常会出现进度不⼀样的情况，有时候前端开发完了接⼝还没好，⼀直等待后端接⼝的话，会严重影响开发效率，采⽤mock⽅式可避免这个问题。
何为Mock？
Mock是⼀种根据约定规则进⾏数据模拟的技术，通过mock我们可以在不修改既有代码的情况下，拦截ajax请求，返回模拟的响应数据。
总结起来mock有以下优点：
1. 让前端攻城师独⽴于后端进⾏开发；
2. 通过随机数据，模拟各种场景，增加单元测试的真实性；
3. 开发⽆侵⼊；
4. ⽤法简单，符合直觉的接⼝；
YApi的Mock服务
mock框架有很多，常见的有mock.js, EasyMock等，为什么选⽤YApi的mock呢？
1. YApi是公司主推的接⼝管理⼯具，⽀持swagger导⼊；
2. 不⽤再⾃⼰写mock规则，Yapi⾃带mock服务，能够根据接⼝的数据结构⽣成随机数据；
3. 每⼀个接⼝都对应⼀个mock地址，⽽且地址的规则是固定的 ${yapi-host}/mock/${appid}/${api-path} ，前端可以在不修改既有代码的情
况下，通过反向代理调⽤mock服务；
如何在项⽬中接⼊Yapi的mock服务
以Vue项⽬为例，前端只需3步就能通过yapi mock数据：
1. package.json⽂件，添加⼀个script
scripts {
...
"mock": "VUE_APP_MOCK=true VUE_APP_MOCK_BASE_API=/mock/<yapi-AppId>/ajax vue-cli-service serve"，
}
该命令设置了两个变量，VUE_APP_MOCK指是否启动mock，VUE_APP_MOCK_BASE_API为mock的base api，注意变量名必须以⼤写的VUE_APP_开头；
以EAS对接平台为例，正常的接⼝路径为'/ajax/xxxx'，接⼝的mock地址为'/mock/1859/ajax/xxxxx'，那参数VUE_APP_MOCK_BASE_API就可以设置为'/mock/1859/ajax';
2. 创建axios实例的时候根据配置项设置 baseurl
const http = ate({
...
baseURL: v.VUE_APP_MOCK
.
..
});
VUE_APP_BASE_API是正常调⽤接⼝的base url，通常为'/ajax';
3. fig⽂件配置 mock服务的反向代理
const vueConfig = {
devServer: {
proxy: {
'/mock/1859/ajax': {
https: true,
target: '',
ws: true,
changeOrigin: true,
},
'/ajax': {
https: true,
target: 'easproxyadmin.aihaisi/',
ws: true,
changeOrigin: true,
},
},
},
注意顺序：先‘mock/1859/ajax’，后配置‘ajax’
配置完后，运⾏ npm run mock，启动项⽬就可以调⽤YApi的mock服务来mock数据了。
YApi mock服务的⼀些⾼级⽤法
定制⽣成规则
mock服务会根据接⼝定义⽣成随机数据，这些数据能满⾜接⼝类型的定义，但是有时候却不合法。例如分页信息pagesize，时间戳类型的字段，mock服务可能会返回⼀个负数，通过定制字段的规则可以避免这种情况。
1. YApi中接⼝页⾯点击编辑
2. 点击需要调整的字段的设置按钮
3. 在设置弹窗中可以设置规则
⾼级mock
有时候不同的请求参数、IP地址返回不同的 HTTP Code、HTTP 头和 JSON 数据，yapi的⾼级mock提供了两种⽅式来解决这个问题。
1. Mock期望
YApi提供了交互式的弹窗来添加Mock期望。例如：想mock⼀下名称是zwj的菜单列表
1. 选中接⼝，点击⾼级mock
2. 点击‘添加期望‘按钮，填写过滤规则以及期望返回数据，点击『确定』保存。
3. 运⾏项⽬，打开对应的页⾯，调⽤接⼝查看返回的数据，结果就是⾼级mock中设置的期望返回数据。
2. ⾃定义脚本
⾃定义脚本是⼀种更灵活的⽅式。Mock期望的⽅式添加的条件只能是参数等于某个值，才能返回相应的数据，⽽⾃定义脚本可以添加⼀些逻辑判断，根据⽤户请求的参数修改返回内容。
举个例⼦：批量同步接⼝，它接收⼀个⽇期范围，同步所有待同步的数据，但如果⽇期范围超过30天，返回错误提⽰。这个时候就可以⽤⾃定义脚步对mock请求进⾏判断处理。
1. 切换到脚步选项卡，输⼊下⾯的脚步，点击保存
if (d - params.start  > 30*24*60*60*1000) {
app接口测试工具mockJson.success = false;
} else {
mockJson.success = true;
}
2. 运⾏项⽬看下效果
Yapi提供了⼀些全局变量可以在脚本中使⽤：
请求
header：请求的 HTTP 头
params：请求参数，包括 Body、Query 中所有参数
cookie：请求带的 Cookies
响应
mockJson：接⼝定义的响应数据 Mock 模板
resHeader：响应的 HTTP 头
httpCode：响应的 HTTP 状态码
delay：Mock 响应延时，单位为 ms
Random：Mock.Random ⽅法，可以添加⾃定义占位符，详细使⽤⽅法请查看 Wiki
Mock 优先级说明
请求 Mock 数据时，规则匹配优先级：Mock 期望 > ⾃定义 Mock 脚本 > 项⽬全局 mock 脚本 > 普通 Mock。总结
YApi的mock服务真的挺好⽤的，接⼊也很简单，前端⼩伙伴们可以试着⽤⼀⽤。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。