从 API 请求中删除空查询字符串的最佳方法答案

【问题标题】：Best way to remove empty query strings from an API request从 API 请求中删除空查询字符串的最佳方法
【发布时间】：2019-11-26 18:59:44
【问题描述】：

在我的 react 应用程序中，我的任务是发送多个 GET 请求，有时会附加一些可选的过滤器参数。此外，我将参数存储在我的 redux 存储中，以便它们能够堆叠在后续请求中。问题是：有时我会清除参数的值，但由于它们的键仍保存在我的商店中，我会收到这样的请求：

/restaurants/?search=&state_id=2

注意search 参数值如何为空（如预期的那样）。我想知道删除这些类型的挥之不去的参数的最佳方法是什么？我查看了 lodash 的 _.omitBy 与 _.isEmpty 的结合，但这在处理分页等数值时会引发一种误报。

_.omitBy(params, ._isEmpty);

我认为通过 react/redux 提供如何确切的参数是没有必要存储的，但如果有帮助，我很乐意提供它。

注意：我正在使用 axios 并将我的参数作为对象而不是字符串传递：

axios.get('restaurants', {
  params
});

【问题讨论】：

标签： javascript reactjs lodash

【解决方案1】：

考虑到您的参数存储在一个对象中（正如您在最新编辑中提到的），您可以删除包含空字符串的属性：

const params = {
  search: "",
  state_id: 2
};

for (const key of Object.keys(params)) {
  if (params[key] === "") {
    delete params[key];
  }
}

console.info(params);

这种替代方案的优点是短且易于维护。

但是对于那些包含所有参数的字符串已经序列化，使用正则表达式很容易：

function removeEmptyParams(query) {
  return query.replace(/[^=&]+=(?:&|$)/g, "");
}

const testQuery = "f=1&search=&state_id=2&foo=&bar=12";
console.info(removeEmptyParams(testQuery));

也非常简单且易于维护。

【讨论】：

【解决方案2】：

最好和最简单的方法是在每个可选参数上使用传播对象文字，像这样

params:{

   ...( CONDITION && {param_key: param_value}),
   ...( this.state_id != null && {state_id: this.state_id})
}

如果条件为真，封装的键值对将被解包，如果条件为假，则没有空值或键。

【讨论】：

【解决方案3】：

您可能需要手动解析。在& 上拆分然后在= 上拆分并检查是否有基于拆分长度的值 - 从那里相应地删除。如果您对正则表达式感到满意，您可以检查= 之后是否有值而不是拆分。

【讨论】：

【解决方案4】：

这个解决方案有点粗糙，但很有效。假设您的查询参数存储在 Map 中，例如：

const params = {
 foo: 'bar',
 bang: 0,
 buzz: '' // this value has been removed from your store
}

您可以从您的 params Map 创建一个键数组，过滤掉没有值的项目，然后将它们作为查询参数重新连接在一起。

const queryString = Object.keys(params).map(filter => {
    if (params[filter] || Number.isInteger(params[filter])) {
      return `${filter}=${params[filter]}`;
    }
    return null;
  }).filter(item => item).join('&');

这将导致foo=bar&bang=0

【讨论】：