规则数据

写在前面

Mock 规则数据是一个 Object 对象,Key 为请求域声明,Value 为响应内容,例如:

  1. export const USERS = {
  2. 'GET /users': { users: [1, 2], total: 2 },
  3. }

表示当通过 HttpClient.get('/users') 访问时,会直接返回 { users: [1, 2], total: 2 },并且不会发送任何 HTTP 请求,你可以通过 Network 面板来确认。

Key 请求域声明

使用 ' ' 空格来区隔请求方法和URL,请求方法可忽略,默认为 GET;URL 支持路由参数和正则表达式。一些有效的 Key:

  1. export const USERS = {
  2. 'GET /users': null,
  3. // GET 可省略
  4. '/users/1': null,
  5. // POST 请求
  6. 'POST /users/1': null,
  7. // 路由参数
  8. '/users/:id': null,
  9. // 正则表达式需要用 `()` 包裹
  10. '/data/(.*)': null
  11. };

Value 响应内容

响应内容支持三种类型:ObjectArray(req: MockRequest) => any

  1. import { MockStatusError } from '@delon/mock';
  2. export const USERS = {
  3. // Array
  4. '/users': [ { uid: 1 }, { uid: 2 } ],
  5. // Object
  6. '/users': { uid: 1 },
  7. // Function
  8. '/qs': (req: MockRequest) => req.queryString.pi,
  9. // 支持返回完整的 HttpResponse
  10. '/http': (req: MockRequest) => new HttpResponse({ body: 'Body', headers: new HttpHeaders({ 'token': '1' }) }),
  11. // 发送 Status 错误
  12. '/404': () => { throw new MockStatusError(404); }
  13. };

MockRequest

名称类型描述
[params]any路由参数,/:idparams.id
[queryString]anyURL参数,/users?pi=1&ps=10queryString.piqueryString.ps
[headers]anyHeaders 值
[body]any请求 body
[original]HttpRequest<any>原始 HttpRequest

MockStatusError

当你希望响应一个 404 异常时。

一些示例

  1. import { MockStatusError } from '@delon/mock';
  2. export const USERS = {
  3. // 支持值为 Object 和 Array
  4. 'GET /users': { users: [1, 2], total: 2 },
  5. // GET 可省略
  6. '/users/1': { users: [1, 2], total: 2 },
  7. // POST 请求
  8. 'POST /users/1': { uid: 1 },
  9. // 获取请求参数 queryString、headers、body
  10. '/qs': (req: MockRequest) => req.queryString.pi,
  11. // 路由参数
  12. '/users/:id': (req: MockRequest) => req.params, // /users/100, output: { id: 100 }
  13. // 发送 Status 错误
  14. '/404': () => { throw new MockStatusError(404); },
  15. // 使用 () 表示:正则表达式
  16. '/data/(.*)': (req: MockRequest) => req
  17. };

存储规则

一般来说 Mock 都是开发过程中需要,因此建议在项目根目录下创建一个 _mock 目录,并创建一个 index.ts 文件用于导出所有数据规则,参考 ng-alain/_mock