Mock 数据

umi支持 静态模拟数据 和 动态模拟数据 两种形态的数据模拟操作。

umi 中约定 mock 目录下的 *.js 会被用来生成模拟API数据。

Mock 配置

Mock 文件配置参考如下pattern:

  1. [HTTP-Method API-Path]: <Static Data Object> | <Dynamic Data Provider>

具体示例

假设 mock 目录结构如下：

  1. + mock/
  2.   - users.js
  3.   - cities.js

静态数据模拟

然后在 users.js 里做如下配置

  1. export default {
  2.   'get /users': {
  3.     result: [
  4.       {
  5.         id: 1,
  6.         name: 'zhangsan',
  7.         alias: '张三',
  8.         email: 'zhangsan@qq.com',
  9.       }
  10.     ]
  11.   }
  12. }

dev启动后，可以通过/users直接在代码请求该API。

动态数据模拟配置

然后在 cities.js 里做如下配置

  1. export default {
  2.   'get /cities': function (req, res, next) {
  3.     setTimeout(() => {
  4.       res.json({
  5.         result: [
  6.           {
  7.             id: 1,
  8.             name: 'beijing',
  9.             alias: '北京'
  10.           }
  11.         ]
  12.       })
  13.     }, 1500)
  14.   }
  15. }

dev启动后，可以通过/cities直接在代码请求该API，1.5s后得到了返回数据。

mock 使开发更轻松

原文: https://v1.umijs.org/guide/mock-data.html