Mockjs如何拦截带参数的GET请求

提出问题

之前写了一篇文章 如何在Vue项目中使用Mockjs，模拟接口返回的数据，实现前后端分离独立开发 阅读量还算挺高的，看来 Mockjs 是非常受欢迎的。
在实践过程中，发现 Mockjs 本身对 GET 请求的支持并不是很友好。
举个例子，使用 Mock.mock("/user/getUserInfo", "get", mockData) 的时候，它只会拦截url等于 /user/getUserInfo 的请求，而对于带参数的请求，如/user/getUserInfo?id=12，因为不等于 /user/getUserInfo 就拦截不到。

解决方法

解决这个问题其实挺简单的，咱们看一下Mock.mock方法:
Mock.mock( rurl, rtype, template )
其中 rurl 的定义是

rurl
可选。
表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如
/\/domain\/list\.json/、’/domian/list.json’。

也就是说 rurl 参数是可以传正则的。对于 GET 请求来说，最简单的方式就是对所有的 url 都使用正则。如：

Mock.mock(RegExp(url + ".*"), "get", mockData);

这个简单粗暴加 .* 的方式在极端情况下可以会有问题，但是一般情况下是够用的了。如果你的 url 都比较相似，可能会出现冲突的话，就写一个严格点的正则替换一下就好。

示例：

import ApiPath from "@/api/ApiPath"
const Mock = require("mockjs")
let mockUserInfo = {
    "code": 0,
    "data": {
      "fullName": "@CNAME", // 随机生成中文人名
      "userId": 1000234234001,
    }
};
Mock.mock(RegExp(ApiPath.user.getUserInfo + ".*"), "get", (options) =>{
    // 最佳实践，将请求和参数都打印出来，以便调试
    console.debug(ApiPath.user.getUserInfo, options);
    return Mock.mock(mockUserInfo);
});

关于请求参数

我们在写拦截的时候，通过传一个方法可以拿到一个参数 options，其中包含了url和参数等信息，可以通过 options.url 拿到具体的url，options.body 拿到请求参数，我们拦截之后将这个 options 打印到控制台，对于调试非常有帮助。而且可以通过获取请求参数，来实现不同的返回值。

Mock.mock(RegExp(ApiPath.user.getUserInfo + ".*"), "get", (options) =>{
    // 最佳实践，将请求和参数都打印出来，以便调试
    console.debug(ApiPath.user.getUserInfo, options);
    return Mock.mock(mockUserInfo);
});