javascript - 如何在 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 "} 参数变成"countryId= 1&clubId=2&playerName=ronal%20do%20" 并正确传递给请求