mirage攻略:和同类工具怎么选

mirage攻略最常被问的不是代码怎么写,而是它和 MSW、json-server、手写 mock 到底选谁。我按真实项目里的使用感受回答,优缺点摊开说,免得工具没选对,后面越用越别扭。

Q1:Mirage和MSW最大的区别是什么?

Mirage JS 更像浏览器里的假后端,内置路由、模型、数据库、工厂这些东西。MSW 更像请求拦截层,通过 Service Worker 或 Node 环境拦截请求。

如果你要模拟一套有增删改查的数据系统,Mirage 写起来顺;如果你更关注测试环境、单元测试、前后端都能复用 mock,MSW 现在更常见。我的选择是:业务原型用 Mirage,测试体系优先看 MSW。

Q2:Mirage和json-server谁更省事?

json-server 的爽点是快,准备一个 db.json,命令一跑就有 REST 接口。适合静态数据、后台列表、简单演示。

Mirage 的省事在于不用额外起服务,直接跟前端项目一起跑,还能写更细的逻辑。比如登录后返回 token、根据 query 筛选、模拟 500 错误,这些在 Mirage 里控制更灵活。

想要完整资源?

会员专享,海量内容

立即查看 →

Q3:只在组件里写假数据不行吗?

小页面当然行。一个弹窗、一个静态卡片,直接写数组最快。但只要涉及请求状态,我就不建议把假数据塞组件里。

原因很简单:组件里写死数据测不到 loading、错误、重试、分页,也容易忘记删。Mirage 的好处是让页面保持真实请求流程,哪怕返回的是假数据,交互链路是真的。

Q4:Mirage适合团队协作吗?

适合,但要有规矩。接口路径、字段结构、错误码,最好跟后端文档保持一致。否则 A 同学 mock 一套,B 同学又写一套,最后谁都不敢信。

我在团队里会约定 mock 文件按模块拆,比如 user、order、product;每个模块只放自己的 routes 和 seeds。提交代码前跑一遍核心页面,别让 mock 变成共享垃圾桶。

Q5:这份mirage攻略的选型结论是什么?

想要最快起一个假 REST 服务,选 json-server;想要测试体系和请求拦截更通用,选 MSW;想要前端本地做一套带状态的假后端,Mirage 仍然好用。

工具没有绝对赢,关键看你要解决什么问题。别为了新潮换工具,也别因为习惯老工具硬撑。能少改业务代码、能覆盖异常状态、能方便联调,就是好方案。

获取完整内容

加入会员,海量资源任你看

立即进入 →

常见问题

mirage攻略里推荐和MSW一起用吗?

一般不建议同一批接口同时用两套拦截工具,容易互相影响。可以按场景分:开发原型用 Mirage,测试用 MSW。

Mirage比json-server慢吗?

普通开发场景体感差别不大。Mirage 跑在浏览器里,更适合本地页面联调;json-server 是独立服务,更像一个轻量后端。

Mirage能模拟POST保存数据吗?

能。你可以在 this.post 里读取 request.requestBody,解析后写入 Mirage 的 schema,再返回新数据。