数据模拟（Mock）

Modern.js 提供了快速生成 Mock 数据的功能，能够让前端独立自主开发，不被后端接口阻塞。

启用 Mock

约定当 config/mock 目录下存在 index.ts 时，会自动开启 Mock 功能，如下：

.
├── config
│   └── mock
│       └── index.ts
├── src
│   └── App.tsx
└── modern.config.ts

你可以通过 dev.mockDir 将 Mock 入口放到其他目录：

modern.config.ts

export default {
  dev: {
    mockDir: './mocks',
  },
};

编写 Mock 文件

config/mock/index.ts 文件只需要导出一个包含所有 Mock API 的对象，对象的属性由请求配置 method 和 url 组成，对应的属性值可以为 Object、Array、Function：

export default {
  /* 属性为具体的 method 和 请求 url，值为 object 或 array 作为请求的结果 */
  'GET /api/getInfo': { data: [1, 2, 3, 4] },

  /* method 默认为 GET */
  '/api/getExample': { id: 1 },

  /* 可以使用自定义函数根据请求动态返回数据, req & res 都是 Node.js HTTP 原生对象 */
  'POST /api/addInfo': (req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.end('200');
  },
};

代码中访问 http://localhost:8080/api/getInfo 时，接口会返回 JSON 格式数据：{ "data": [1, 2, 3, 4] }。

返回随机数据

可以在 config/mock/index.js 中自主引入 Mock.js 等库生成随机数据，例如：

const Mock = require('mockjs');

module.exports = {
  '/api/getInfo': Mock.mock({
    'data|1-10': [{ name: '@cname' }],
  }) /* => {data: [{name: "董霞"}, {name: "魏敏"},  {name: "石磊"}} */,
};

更多随机数据生成库

延迟响应

可以使用浏览器「弱网模拟」的功能实现。
可以通过 setTimeout 为单个接口设置延迟，例如：

module.exports = {
  '/api/getInfo': (req, res) => {
    setTimeout(() => {
      res.end('delay 2000ms');
    }, 2000);
  },
};

按需使用 Mock 服务

config/mock/index.ts 下还可以导出 config 对象，更精细的控制 Mock 服务。

import type { IncomingMessage } from 'node:http';
import type { ServerResponse } from 'node:http';

type MockConfig = {
  enable: ((req: IncomingMessage, res: ServerResponse) => boolean) | boolean;
};

export const config = {
  enable: false,
};

目前仅支持 enable 配置，开发者可以通过该配置控制是否执行 Mock。

Note

修改 config 后无需重启服务，即刻生效。

#数据模拟（Mock）

#启用 Mock

#编写 Mock 文件

#返回随机数据

#延迟响应