Как я могу сделать динамический параметр в URL?

Question

Мой URL-адрес выглядит так:

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 (полезная нагрузка),результат как этот:

{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", и они передаются для правильного запроса

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 непосредственно в правильно сформированные параметры поиска. Это обеспечивает функциональность для кодирования, а также.