注：本文是《前端Mock选型大全》的模块。

注意：mockjs不支持fetch ，如何解决看下面。

1 安装使用

前端项目使用：

  1. npm i mockjs # 安装
  2. npm i mockjs-fetch # fetch兼容包

如何使用：

  1. import Mock from "mockjs";
  2. import MockFetch from "mockjs-fetch";
  3. MockFetch(Mock);
  5. // 属性名|生成规则：值
  6. const data = Mock.mock({
  7.   "list|1-10": [
  8.     {
  9.       "id|+1": 1,
  10.     },
  11.   ],
  12. });
  14. Mock.mock("/api/lists", "get", {
  15.   list: [1, 2, 3]
  16. });
  17. // 传递不同的 method
  18. Mock.mock("/api/lists", "post", {
  19.   list: [1, 2, 4]
  20. });
  21. // 通过函数自定义返回数据，但需要注意 parse
  22. Mock.mock("/api/opt", "post", (opt) => {
  23.   return JSON.parse(opt.body);
  24. });
  26. // 页面中
  27. const data = await fetch("/api/lists", {
  28.   method: "get"
  29. }).then((res) => res.json());
  30. console.log(data);

2 生成规则

  • 属性上 min-max : 1-2 ，或者具体值
  • +step 属性自增
  • 如果值是数组，属性控制值
  • 其他略

就简单的 random，建议忽略，要真搞不如看单独的 >>> Faker.js <<<

3 技术总结

没看到有交互功能。

技术原理：重写 xhr

从 1.0 开始，Mock.js 通过覆盖和模拟原生 XMLHttpRequest 的行为来拦截 Ajax 请求，不再依赖于第三方 Ajax 工具库（例如 jQuery、Zepto 等）。

同时因为mockjs只重写了 xhr ，所以不支持 fetch 操作，需要安装 axios-fetch 。

4 选型结论

优点：

  • 好名字，名气大
  • 使用简单，直观，功能少并且稳定
  • 有简单的random语法

缺点：

  • 停更
  • 如果用到fetch需要额外处理
  • 无法通过postman请求