> For AI agents: the complete documentation index is available at /zh/llms.txt, the full documentation bundle is available at /zh/llms-full.txt.

# 数据模拟（Mock）

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

## 启用 Mock

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

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

你可以通过 [`dev.mockDir`](/zh/configure/app/dev/mock-dir.md) 将 Mock 入口放到其他目录：

```js title="modern.config.ts"
export default {
  dev: {
    mockDir: './mocks',
  },
};
```

## 编写 Mock 文件

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

```js
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](https://github.com/nuysoft/Mock/wiki/Getting-Started) 等库生成随机数据，例如：

```js
const Mock = require('mockjs');

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

:::info 更多随机数据生成库

- [Chancejs](https://github.com/chancejs/chancejs)
- [Mock](https://github.com/nuysoft/Mock/wiki/Getting-Started)

:::

## 延迟响应

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

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

## 按需使用 Mock 服务

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

```ts
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` 后无需重启服务，即刻生效。
:::