Mockjs如何拦截带参数的GET请求
提出问题
之前写了一篇文章 阅读量还算挺高的,看来 Mockjs 是非常受欢迎的。 在实践过程中,发现 Mockjs 本身对 GET 请求的支持并不是很友好。 举个例子,使用 Mock.mock("/user/getUserInfo", "get", mockData) 的时候,它只会拦截url等于 /user/getUserInfo 的请求,而对于带参数的请求,如/user/getUserInfo?id=12,因为不等于 /user/getUserInfo 就拦截不到。
解决方法
解决这个问题其实挺简单的,咱们看一下方法: 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); });