开始使用

写在前面

Mock 是指通过生成模拟数据让前端开发人员独立于后端进行开发,有时我们也会运用在测试环境中。

@yelon/mock 是一个简单 Mock 功能,包括以下几个特征:

  • 任意 Angular 项目

  • 开发无侵入

  • 超简单用法

  • 支持 mock.js

如何使用

安装 @yelon/mock 依赖包:

npm i --save-dev @yelon/mock

参考 global-config.module.ts 导入Mock 规则数据

MockOptions配置

可以通过全局配置覆盖它们。

成员类型默认值说明全局配置
[data]any-Mock 数据规则
[delay]number300请求延迟,单位:毫秒
[force]booleanfalse是否强制所有请求都Mock,true 表示当请求的URL不存在时直接返回 404 错误,false 表示未命中时发送真实HTTP请求
[log]booleantrue是否打印 Mock 请求信息,弥补浏览器无Network信息;当请求经过 Mock 会接收【👽Mock】
[copy]booleantrue是否返回副本数据

为什么只对开发环境有效?

Mock 并非是真实数据,大部分场景是针对开发本地或测试环境;所以在生产环境中不应该包括 Mock 模块以及规则数据。

当然,也可以将 environment.tsprovideMockConfig 放到 environment.prod.ts 下,使得生产环境也使用这种规则,就像 https://hbyunzai.github.io/ng-yunzai/ 一样,需要一些模拟请求来保证环境的运行。

import { provideMockConfig } from '@yelon/mock';
import * as MOCKDATA from '../../_mock';
export const environment = {
  providers: [provideMockConfig({ data: MOCKDATA })],
} as Environment;
Loading...