/**
 * 定义本地测试接口，最好与正式接口一致，避免联调阶段修改工作量
 */
// 引入mockjs
import Mock from 'mockjs';
// 引入模板函数类
import record from './presc-record-api';

Mock.setup({
 timeout: 800, // 设置延迟响应，模拟向后端请求数据
});

// Mock.mock( url, post/get , 返回的数据)；
Mock.mock(/\/api\/healthPlat\/getRecipe\/\w*\/\w*/, 'get', record.getRecipe);

// 获取 mock.Random 对象
// 引入mockjs
import { Random } from 'mockjs';
import Utils from './Utils';

function getRecipe(req) {
 // mock一组数据
 const data = [];
 for (let i = 0; i < 10; i += 1) {
  const o = {
   recipeId: Random.guid(),
   billId: Random.string(10),
   orgId: Random.string('number', 8, 10),
   viewName: Random.cword(4, 16), // 随机生成任意名称
   personName: Random.cname(),
   reason: Random.csentence(10, 32),
  };
  data.push(o);
 }
 // 返回响应数据对象
 return Utils.setRes(req, {
  data: {
   idCard: Random.id(), // 随机
   details: data,
  },
  totalCount: 20,
 });
}

export default {
 getRecipe,
};

// 引入mock文件
import './mock/index'; // mock 方式，正式发布时，注释掉该处即可

function setRes(req, options) {
 window.console.log(req.url);
 const { code = Random.int(0, 5) >= 1 "_blank" href="https://github.com/lodash/lodash/tree/4.0.8-npm-packages/lodash.debounce" rel="external nofollow" >lodash.debounce 函数有延迟网络请求、稀释事件、延迟执行的效果，于是将模板函数用 debounce 包裹起来，如下：

复制代码 代码如下:Mock.mock('/api/healthPlat/chronicdisease', 'get', debounce(record.chronicdisease, 600));
结果出现有意思的事情：当请求比较频繁，在延迟时间内，本次请求得到的响应数据是上次请求的结果。这显然不是我们希望看到的，而且我们一般是用 debounce 的来稀释请求的，用在请求发送之后显然违背了我们的初衷。


翻阅 mockjs 文档，发现作者已经考虑了这个事情。哎，辛苦忙活了大半天，还是要好好看文档啊。具体如下：


Mock.setup({
 timeout: 800, // 设置延迟响应，模拟向后端请求数据
});


5. Mock 无法拦截带参数的 get 请求
刚开始时，发现设置的有些 get 请求总是请求不到 mock 的数据，而有些 get 请求能得到 mock 的数据，post 则不存在这样的问题。非常郁闷！


仔细 debug 时发现：get 请求带参数时失败，找不到路径；get 请求不带参数成功，路径没找到，获取到 mock 的数据；post 路径正确找到，成功得到 mock 数据。


这时突然意思到：get 请求的路径默认后面会加上参数，因此和设置的路径没有匹配上，导致路径没找到，请求失败。

于是本人将路径改成正则表达式，就好了。如：


// 刚开始字符串路径，带参数的 get 请求匹配失败
Mock.mock('/api/healthPlat/renewCancel', 'get', manage.renewCancel);


改成下面这样就好了：


// 正则表达式路径，带参数的 get 请求匹配成功
Mock.mock(/\/api\/healthPlat\/renewCancel/, 'get', manage.renewCancel);


但是实际开发过程中，发现上述正则表达式不够完备，如后续我们又另一个路径 /api/healthPlat/renewCancelAddr 也会匹配上述地址，这不是我们希望有的。


此时我们只需改进下正则表达式即可：


// 正则表达式路径，带参数的 get 请求匹配成功
Mock.mock(/\/api\/healthPlat\/renewCancel(|\"color: #ff0000">总结


mock虽然存在以上所涉及的局限和问题，不过对于日常自测联调还是很有益处，个人觉得主要还是简单可行。当然本文所述方式，不仅仅局限在 vue-cli 中，其他框架中亦可按此法进行配置。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。