mock的使用

164 阅读3分钟

emock值多少。为什么要mock?当然是节约前后端联调成本了,在一部分公司,你的工时里是不包含联调时间的,尽管有时候联调往往占了大头。 以前只是觉得mock就是在本地上去写一些数据结构就完事了,但是越到工作后期越发现,没那么简单,而且这种侵入式mock,管理很松散,效率很低,到联调阶段,该阻塞还是阻塞,难受的雅痞。接下来我们就来解析下mock的几种方案。

1. 侵入式mock

这种mock在日常开发或者说大部分开发者中最常见,mock数据维护在本地,或者更粗暴点,用完即删,这种手段如上所说,模拟的效果非常有限。

2. 第三方接口管理工具

这个大厂用的挺多的,像是网易,大搜车用的swagger,还有阿里的oneApi等,说实话,效果挺好的,但是平台本身也是一个成本,毕竟是多在大厂,大团队中去使用和维护,而且如果这个平台碰到问题,作为前端,我们毫无办法,只能还是去请求后端。

3. 本地node服务器

也就是本地开发一个node作为服务层,已经有比较好的例子了,json-server,它是使用lowdb,操作本地小型的数据库(遵循 REST API)。可以使用全局命令,也可以使用node进行配置和开发。 特点:

  • 可以独立使用,也可以作为node服务的中间件 server.use(db)
  • db可以是json文件(更直观),也可以使js文件(灵活性更高)
  • 可以设置跨域、开启gzip、设置延时、日志、指定路由等。json-server [options]
  • 可命令行启动或 json-server.json 配置后直接启动
  • 可以自定义路由映射(key为真实路由、value为mock路由)但是,随之而来的缺点就是,后端那边改动,我们这边也要相对应的调整这个mock,不太智能。但是它是成本稍微比较低的工具,所以之后会单独开篇记录下它的使用。

4. 请求拦截

特点:

  • 通过拦截特定的AJAX请求,并生成给定的数据类型的随机数,以此来模拟后端同学提供的接口。
  • 使用数据模板定义,随机生成定义数据的自由度大。使用MockJS的Random工具类的方法定义,这种方式自由度小,只能随机出MockJS提供的数据类型。
  • 一般配合其它库使用或单独在项目中使用或者通过反向代理来实现。代表人物Mock.js 优点:
  1. 与前端代码分离

  2. 可生成随机数据缺点:

  3. 数据都是动态生成的假数据,无法真实模拟增删改查的情况

  4. 只支持 ajax,不支持 fetch## 5. 抓包工具 这个用起来非常的繁琐,代表人物有青花瓷,Fiddler等 常见的处理方式有

  • 将 URL 映射到本地文件;(调试APP混合开发等)
  • debugger某个url,修改响应数据。
  • 拦截后返回本地的数据,如青花瓷直接采用Map locale 或者 Map Remote的方式。不太推荐

6. 组合模式

代表:easy-mock(提供在线服务和接口代理,支持mockjs、Swagger、restapi风格)node框架生成器 + json-server+ mockjs。

小结

总的来说,仁者见仁,智者见智,个人意见,如果有条件,肯定是要第三方的接口管理,多舒服,前端这边不需要多余的工作量。 ​ 摘录: 这么好的 Mock 工具怎么还不用起来?