如何在 url 上设置动态参数？答案

【问题标题】：How can I make dynamic parameter on the url?如何在 url 上设置动态参数？
【发布时间】：2023-03-22 11:16:01
【问题描述】：

我的网址是这样的：

https://my-website.com/api/players?countryId=1&clubId=2&playerName=abc

参数是动态的

我的代码是这样的：

getDataPlayer(payload) {
    let params
    if(payload.countryId && payload.clubId && payload.playerName)
      params = `countryId=${payload.countryId}&clubId=${payload.clubId}&playerName=${payload.playerName}`

    return axios.get(`https://my-website.com/api/players?${params}`)
      .then(response => {
        return response.data
      })
},

如果我 console.log(payload)，结果是这样的：

{countryId: "1", clubId: "2", playerName: "ronaldo"}

它是动态的。有效载荷可以是：

{countryId: "1", clubId: "2"} 或

{playerName: "ronaldo"}

有简单的方法吗？或者我必须在getDataPlayer方法中设置很多条件

【问题讨论】：

标签： javascript ajax vue.js url parameters

【解决方案1】：

function formatQuery(payload) {
  var params = '';

  if (payload.countryId && payload.countryId.trim().length) params += `countryId=${encodeURIComponent(payload.countryId.trim())}&`;

  if (payload.clubId && payload.clubId.trim().length) params += `clubId=${encodeURIComponent(payload.clubId.trim())}&`;

  if (payload.playerName && payload.playerName.trim().length) params += `playerName=${encodeURIComponent(payload.playerName.trim())}`;


  console.log(params);
  return params;

}

formatQuery({countryId: "1", clubId: "2", playerName: "ronaldo"});

formatQuery({countryId: "1", clubId: "2"});

formatQuery({playerName: "ronaldo"});

【讨论】：

请不要只回答代码。请记住，您不仅要回答 OP，还要回答可能偶然发现这个问题的未来访客。做edit答案包含一些解释，或者作为代码中的cmets，或者作为它周围的文本。

【解决方案2】：

对于查询字符串参数，您可以使用encodeURIComponent对字符串进行正确编码。使用Array.map 循环键并通过Array.join 组合最终结果，如下所示

 let params = Object.keys(payload).map(el => `${el}=${encodeURIComponent(payload[el])}`).join('&')

如果您的payload 是{countryId: "1", clubId: "2", playerName: "ronal do "}，则参数变为"countryId=1&clubId=2&playerName=ronal%20do%20" 并正确传递给请求

【讨论】：

我试过了。但它使调用 ajax 不停
去掉 axios 处的回车
我需要return
我认为像上面的答案一样格式化有效负载以使其正确变为查询字符串的功能也很好，也许可以解决问题。我不知道。但从逻辑上讲，我的代码已经根据您的需要解决了查询字符串

【解决方案3】：

如果您愿意，可以使用 npm 模块 query-string。链接：https://www.npmjs.com/package/query-string。

然后，您可以将 JSON 对象直接转换为格式正确的搜索参数。它还提供了编码功能。

【讨论】：