安装 Mcok

yarn add mock -D

添加全局声明

// ? 根目录下的 typing.d.ts

declare module 'mockjs';

添加 mock 文件

// ? src/mock/global.ts

/*
 * @Description: 公共模块 mock
 */

import Mock from 'mockjs';

const { Random } = Mock;

/**
 * mock 5-30 个设备数据
 * @param req
 * @param res
 */
const getDeviceList = (req: any, res: any) => {
  const response = Mock.mock({
    'data|5-20': [
      {
        'id|+1': 1,
        name: () => Random.cname(),
        address: () => Random.region(),
      },
    ],
  });
  // ? 模拟请求延迟
  setTimeout(() => {
    return res.status(200).send(response);
  }, 500);
};

export default {
  'GET /device/page/': getDeviceList,
};

暂时还无法测试是否添加成功，后面配置完 dva 的数据流程后，可以请求一下这个 mock 的 API，如果返回了数据，就表示成功了。这里先暂时先添加上。

项目中使用mock

项目启动后，获取 mock 数据的 API 格式就是：访问项目启动时的 IP域名+项目中自定义的 API。

如当前项目 yarn start 启动后，提示可通过 http://192.168.88.233:8000/postManager 访问项目，

这时我们需要调取上面自定义的 API /device/page/ 来获取 mock 数据

就可以访问 http://192.168.88.233:8000/device/page/ 就能拿到 mock 的数据了。

实际使用有两种方式来实现：

直接修改配置，将配置中请求的域名配置置空即可默认使用项目当前的域名来请求了。

实际开发中，如当前是测试环境，config/config.dev.ts 配置文件里面，定义了全局请求的地址 API_BASE 变量，删除它的值，直接给个空值，就能默认使用当前页面的域名作为请求的地址了。

可结合环境变量来配置命令

// ? package.json

{
	"scripts": {
  	"start:mock": "cross-env PORT=8000 UMI_ENV=dev MOCK=yes umi dev",
  }
}

// ? config/config.dev.ts

import { defineConfig } from 'umi';

const { MOCK = '' } = process.env;

export default defineConfig({
  define: {
    APP_ENV: 'dev',
    API_BASE: MOCK === 'yes' ? '' : 'http://xxx',
  },
});

这样简单配置后，即可直接使用命令 yarn start:mock 来启动项目，并能使用 mock 了。

返回目录文档

添加 Mock

安装 Mcok

添加全局声明

添加 mock 文件

项目中使用mock