之前写了一篇文章 如何在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);
});