数据模拟
Modern.js 提供了快速生成 Mock 数据的功能，能够让前端独立自主开发，不被后端接口阻塞。
启用 Mock
约定当 config/mock 目录下存在 index.[jt]s 时，会自动开启 Mock 功能，如下：
.
├── config
│ └── mock
│ └── index.ts
├── src
│ └── App.tsx
└── modern.config.ts
编写 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 服务。
type MockConfig = {
enable: ((req: IncomingMessage, res: ServerResponse) => boolean) | boolean;
};
export const config = {
enable: false
}
目前仅支持 enable 配置，开发者可以通过该配置控制是否执行 Mock。
