使用Mock Service Worker测试GET请求时req.url.searchParams为空如何解决

核心问题1：路径匹配规则不匹配 #

你定义的拦截路径为 https://api.github.com/search/users/（末尾带斜杠），但实际业务发起请求的路径为 https://api.github.com/search/users（末尾无斜杠），MSW 路径匹配默认执行严格校验，这会导致请求匹配逻辑出现异常，无法正确挂载查询参数到 req.url 上。

核心问题2：req.params 用法认知错误 #

req.params 仅用于存储你在拦截路径中通过 :参数名 声明的路径参数，比如你第二个接口定义的 :user 就会出现在 req.params 中。而 ? 后拼接的查询参数本身就不会存储在 req.params 里，该对象为空属于正常现象。

核心问题3：URLSearchParams 打印误区 #

req.url.searchParams 是浏览器内置 URLSearchParams 类的实例，直接打印该实例在部分运行环境下会序列化为空对象，不代表它没有存储查询参数，需要调用它的内置方法取值即可。

const server = setupServer(
  // 去掉路径末尾的斜杠，和实际请求路径保持一致
  rest.get('https://api.github.com/search/users', async (req, res, ctx) => {
    // 用内置方法获取查询参数
    const userName = req.url.searchParams.get('q')
    const pageNo = req.url.searchParams.get('page')
    console.log('查询用户名', userName, '页码', pageNo) // 可正常拿到值
    const users = search_data[1]
    return res(ctx.json(users))
  }),

  rest.get(`https://api.github.com/users/:user`, async (req, res, ctx) => {
    return res(
      ctx.json(
        users_data[1].users.find((user) => user.login === req.params.user)
      )
    )
  })
)

内容的提问来源于stack exchange，提问作者Efthyvoulos Tsouderos