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

Question

我的网址是这样的：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 中设置很多条件

Answer 1

对于查询字符串参数，您可以使用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 "}在PARAMS变得"countryId=1&clubId=2&playerName=ronal%20do%20"和它传递给正确请求

Answer 2

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"});

Answer 3

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

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