快捷搜索: 王者荣耀 脱发

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);
});
经验分享 程序员 微信小程序 职场和发展