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);
});

猜你喜欢

转载自blog.csdn.net/dadiyang/article/details/82825163