(vue3)mock了一个模拟数据的接口,但是一传参就报错404是怎么回事呢?

Question

我跟着老师的代码写了个mock模拟数据的接口,不加参数的时候可以执行成功拿到数据,但是只要一加上参数就报错了,好像根本找不到这个路径似的,请问有人知道这是怎么回事嘛~~谢谢各位啦,找了两天都不知道问题在哪...感恩!

mock的数据:

/**
   * 获取列表
   * 要带参数 name, page, limt; name可以不填, page,limit有默认值。
   * @param name, page, limit
   * @return {{code: number, count: number, data: *[]}}
   */
  getUserList: config => {
    console.log(config);  //这一步没有打印,没有执行到这里,下面应该可以不用看了
    const { name, page = 1, limit = 20 } = param2Obj(config.url)
    console.log('name:' + name, 'page:' + page, '分页大小limit:' + limit)
    const mockList = List.filter(user => {
      if (name && user.name.indexOf(name) === -1 && user.addr.indexOf(name) === -1) return false
      return true
    })
    const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
    return {
      code: 20000,
      count: mockList.length,
      list: pageList
    }
  },

mock文件:

import Mock from "mockjs"
import user from "./mockServerData/user" 
Mock.mock('/api/user/getUser','get', user.getUserList) 

axios请求:

// 获取用户信息
export const getUser = (params) => {
  return request('user/getUser', 'get', params)
}

调用接口:

 getUser({page: 1, limit: 10}).then((re) => {
        // console.log(re); 直接报错
      });

报错信息:

Answer 1

我找到问题所在啦!!mock拦截不到带参数的get请求,因为他只能拦截到前半部分没带参数的路径,而后面带参数的部分拦截不到,所以可以使用正则表达式写路径
将'/api/user/getUser' 改成 RegExp("/api/user/getUser" + ".*") 即可!!!