Umi项目中mock请求数据

606 阅读1分钟

相当于前端项目中编写node接口。

React、vue项目可使用各种npm开源包。

umi应用开发框架集成了Mock。

约定式Mock文件

约定了/mock下的文件

├── mock
    ├── api.ts
    └── users.ts
└── src
    └── pages
        └── index.tsx
两个ts文件会被解析成mock文件

编写Mock文件

export default {
  'GET /api/users': { users: [1, 2] },
  // GET 可忽略
  '/api/users/1': { id: 1 },

  'POST /api/users/create': (req, res) => {
    // 添加跨域请求头
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.end('ok');
  },
}

Mock文件被解析出来后,在services文件夹下的使用该url即可调用Mock接口。

MockJs

Mock.js 是常用的辅助生成模拟数据的三方库。

import mockjs from 'mockjs';

export default {
  // 使用 mockjs 等三方库
  'GET /api/tags': mockjs.mock({
    'list|100': [{ name: '@city', 'value|1-100': 50, 'type|0-2': 1 }],
  }),
};