在前后端分离的开发中，Mock 数据是前端开发中很重要的一个环节，前端可以不必强依赖后端接口，只需要约定好对应的数据接口，前端可以通过 Mock 模拟数据先行开发，在后端接口开发完成后，只需要切换对应的接口地址即可，可以保证项目的同步开发。

在飞冰中，我们提供了完整的 Mock 方案，支持 CRUD 等操作，只需要在项目目录下新建 mock 文件夹，并配置入口文件 index.ts 作为路由表的入口，在启动项目服务时工具会同步的启动 Mock 服务。

编写 mock 接口

在项目根目录下新建 mock/index.ts 文件，并写入以下示例代码：

  1. export default {
  2.   // 同时支持 GET 和 POST
  3.   '/api/users/1': { data: {} },
  4.   '/api/foo/bar': { data: {} },
  6.   // 支持标准 HTTP
  7.   'GET /api/users': { users: [1, 2] },
  8.   'DELETE /api/users': { users: [1, 2] },
  10.   // 支持参数
  11.   'POST /api/users/:id': (req, res) => {
  12.     const { id } = req.params;
  13.     res.send({ id: id });
  14.   },
  15. };

启动调试服务后，假设启动的端口是 3333，直接在浏览器里访问 http://127.0.0.1:3333/api/users 即可看到接口返回数据。

约定规则

默认约定项目 mock 目录下每一个 (t|j)s 文件为 mock 服务文件，即需要使用上述规范返回数据接口。 如果存在 mock 服务通用工具脚本和数据脚本，可以将对应的文件存放在 mock/excludeMock 目录下，该目录下默认不走 mock 逻辑。

忽略 mock 的文件，可以通过工程配置进行自定义：

  1. {
  2.   "mock": {
  3.     "exclude": ["**/custom/**", "**/*.ts"]
  4.   }
  5. }

上述规则代表忽略 mock 目录中所有 custom 目录下的文件以及所有 ts 类型文件

请求数据

  1. import { useRequest } from 'ice';
  3. function ListView(props) {
  4.   const { data, loading, error, request } = useRequest({
  5.     url: '/api/users/1',
  6.     method: 'GET',
  7.   });
  9.   useEffect(() => {
  10.     request();
  11.   }, []);
  13.   console.log(data);
  15.   return (
  16.     <>
  17.       // jsx
  18.     </>
  19.   );
  20. }

使用 Mock.js

Mock.js 是一个随机生成 mock 数据的工具库：

  1. import * as Mock from 'mockjs';
  3. export default {
  4.   'GET /api/list': (req, res) => {
  5.     const list = Mock.mock({
  6.       'list|1-10': [
  7.         {
  8.           'id|+1': 1,
  9.         },
  10.       ],
  11.     });
  12.     res.send({
  13.       status: 'SUCCESS',
  14.       data: {
  15.         list,
  16.       }
  17.     });
  18.   },
  19. };

完整的语法情参考 Mock.js 文档 。