预想的问题

  1. 在实际项目开发中，我们经常会遇到和服务端同步开发的情况。

这时候我们就可以要求服务端先输出接口文档，前后端都根据接口文档输出。
在项目交付之前一段时间，再进行前后端连调。

  1. 在demo开发学习的过程中，我们也常常遇到需要静态数据的情况
  2. 公司网络限制了只能访问部分外网，是的，墙里墙，还是满多的
  3. 没有网络的情况，呵呵，想到咖啡店敲个代码，悠哉悠哉，没有公用Wi-Fi，接口都挂了，页面渲染不出来

umi 中使用 mock

在 umi 中使用 mock 还是蛮简单的，任何配置都不需要，只要在 ./mock/ 文件夹下，新建 js 文件，然后按照规范编写文档，就可以使用 mock 功能了。

在page下，定义_mock.js也可以使用mock功能。如./src/pages/index/_mock.js

这里有一个最简单的实现：

mock/heros.ts

  1. export default {
  2.     '/api/web201605/js/herolist.json': [
  3.         {
  4.           ename: 106,
  5.           cname: '小乔',
  6.           title: '恋之微风',
  7.           new_type: 0,
  8.           hero_type: 2,
  9.           skin_name: '恋之微风|万圣前夜|天鹅之梦|纯白花嫁|缤纷独角兽',
  10.         },
  11.       ],
  12.   };

只要请求路径匹配，那么就会直接返回数组。我们先关闭 .umirc.js 中的 proxy 配置，先注释掉就好。

  1. // "proxy": {
  2. //   "/api": {
  3. //     "target": "https://pvp.qq.com",
  4. //     "changeOrigin": true,
  5. //     "pathRewrite": { "^/api" : "" }
  6. //   }
  7. // }

然后开启开发服务器

Mock数据 - 图1

我们写在model里面的静态文件是有两个英雄的，使用proxy代理，从官方取得是有几十个英雄的，从mock里面取的是一个英雄的数据。

保存接口数据

我们把 https://pvp.qq.com/web201605/js/herolist.json 请求的数据，保存下来，作为我们的本地数据，存放到 ./mock/herolist.json 其实你可以放到任意的地方，放在这里面也不会被解析成mock服务，只是就近放在一起而已，因为这个数据很大，放到 ./mock/heros.js 里面的话会让文件变得很长，不利于我们看代码。
然后在 ./mock/heros.js 中引入herolist.json ,修改一下请求的返回值，这样我们的mock数据就和官方接口返回值保持一致啦。

  1. import herolist from './herolist.json';
  3. export default {
  4.   '/api/herolist.json': herolist
  5. };

在开发过程中，服务端启用临时服务器，返回出参，可以通过这种不规范不推荐的方式保留下来。在服务器不可以的情况下，我们还可以进行前端的开发工作

还有一种比较常用的方式是需要取得请求携带的参数。

mock请求携带参数

比如我们需要取得单个英雄的数据，我们就需要在请求里面携带参数。
./mock/heros.ts

  1. 'POST /api/herodetails.json': (req, res) => {
  2.     const { ename } = req.body;
  3.     const hero = herolist.filter(item => item.ename === parseInt(ename, 10))[0];
  4.     res.send(hero);
  5.   },

定义了这个请求是 post 请求，并从请求参数中取出来 ename 对原数组做了过滤。
然后在 ./src/models/hero.ts 中修改请求。

  1. const data = yield request('/api/herodetails.json', {
  2.         method: 'POST',
  3.         body: {
  4.           ename: 110,
  5.         },
  6.       });

请求携带了参数 body，但是，到后端取不到数据。

mock post 取不到参数

这里需要注意，我们需要为请求增加请求头，还有 body ，需要转成字符串。
最后我们发起的请求就是

  1. const data = yield request('/api/herodetails.json', {
  2.         method: 'POST',
  3.         headers: {
  4.           Accept: 'application/json',
  5.           'Content-Type': 'application/json; charset=utf-8',
  6.         },
  7.         body: JSON.stringify({
  8.           ename: 110,
  9.         }),
  10.       });

Mock数据 - 图2

这两种写法是比较简单常用的，更多的 mock 推荐用法，可以查阅 umi 官网 mock-data 。