vue-cli4 + Mockjs如何拦截带参数的请求

---

前言

上一篇vue-cli4+mockjs的使用讲到使用mockjs模拟数据，那么请求带参数的话会发生什么呢？

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、发现问题

将vue-cli4+mockjs的使用的例子拿过来改一下：
get请求带了一个参数id

_this.http.get(_this.api.LIST,{
    
    id : 0}).then( res => {
    
    
          if(res.status === 200){
    
    
            console.log('res---------',res)
            //TODO
          }
      }).catch(err => {
    
    
        
    })

结果报错了：

二、分析原因

是由于get请求会将参数以字符串的方式拼接在url地址后面，导致mockjs认为api/list?id=0与api/list不一致

---

为了验证这一假设，我在mock/index.js中将：

Mock.mock(api.LIST+'?id=0','get',userInfo)

改为

Mock.mock(api.LIST,'get',userInfo)

结果是可以请求到数据，那么我的假设是成立的。
但是请求中id的值无法确定，不可能将所有值全部写到mock/index.js中

三、解决办法

Mock.mock()方法的详细文档中提到：

Mock.mock( rurl, rtype, template )

• rurl表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 //domain/list.json/、’/domian/list.json’。
• rtype表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
• template表示数据模板，可以是对象或字符串。例如 { ‘data|1-10’:[{}] }、’@EMAIL’。

解决办法：url使用正则表达式
将mockjs请求改为：

Mock.mock(RegExp(api.LIST + '.*'),'get',userInfo)
//api.LIST是/api/list

• 点. 用于查找单个字符，除了换行和行结束符
• 星号* 匹配前面的字符可以出现任意次数
• .* 表示这个.可以出现任意次数，也可以不出现

也就是说上面的正则表达式可以匹配
/api/list
/api/list?id=0
/api/list/page?id=2
…
如果是子路由的话，/api/list?id=0与/api/list/page?id=2同样会被拦截到，如果想分开拦截的话，建议使用

Mock.mock( rurl, rtype, function( options ) )

• function( options ) 表示用于生成响应数据的函数。

控制台打印结果为：

可根据参数url的不用，模拟对应的数据

附：推荐一个学习正则表达式语法的网站

总结

Mockjs如何拦截带参数的请求