当我使用 Mock Service Worker 测试两个 get 请求时，为啥 req.url.searchParams 参数对象为空？

Posted 2023-02-21

【中文标题】当我使用 Mock Service Worker 测试两个 get 请求时，为啥 req.url.searchParams 参数对象为空？

【英文标题】：Why the req.url.searchParams parameters object is empty when I test two get requests using Mock Service Worker?当我使用 Mock Service Worker 测试两个 get 请求时，为什么 req.url.searchParams 参数对象为空？

【发布时间】：2021-11-07 01:24:12

【问题描述】：

我在一个使用 Mock Service Worker 的反应应用程序中进行了测试。我这样设置服务器：

 const server = setupServer(

  // https://api.github.com/search/users?q=$userName&type=users&per_page=10&page=$pageNo`,
  rest.get('https://api.github.com/search/users/', async (req, res, ctx) => 
    console.log('rest req.params', req.params) //  empty object
    console.log('rest req.url.searchParams', req.url.searchParams) //  empty object
    const users = search_data[1]
    return res(ctx.json(users))
  ),

  // https://api.github.com/users/$user
  rest.get(`https://api.github.com/users/:user`, async (req, res, ctx) => 
    // console.log('rest req.params.user', req.params.user) // this works as it should
    return res(
      ctx.json(
        users_data[1].users.find((user) => user.login === req.params.user)
      )
    )
  )
)

上面的第一个get请求正在拦截被注释掉的api端点（它上面的那个）。 我想在一个对象中获取查询参数，比如用户名，但返回的对象是空的。我做错了什么？

截取的代码如下：

const searchGithubApi = (
  userName: string,
  pageNo: number = 1,
  signal: AbortSignal
) => 
  console.log('userName', userName) // I get the correct userName
  return fetch(
    `https://api.github.com/search/users?q=$userName&type=users&per_page=10&page=$pageNo`,
    
      headers: 
        Accept: 'application/vnd.github.v3+json',
      ,
      signal,
    
  ).then((res) => res.json())
  

【参考方案1】：

请参阅下面的链接，它解释得很好。 https://github.com/mswjs/msw/discussions/910

【参考方案2】：

您应该使用URLSearchParams API 来检索请求查询参数：

req.url.searchParams.get('q')

注销req.url.searchParams 将始终返回一个空对象，因为您实际上是在注销一个不将查询参数存储为其属性的类实例（因此您会看到一个空对象）。