Question

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

/restaurants/?search=&state_id=2

注意search参数值如何为空（如预期）。我想知道消除这些缠绵参数的最佳方法是什么？我研究了lodash的_.omitBy与_.isEmpty的组合，但这在处理诸如分页之类的数值时会产生某种误报。

_.omitBy(params, ._isEmpty);

我认为不需要通过react / redux提供 how 的确切参数，但是很乐意提供帮助。

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

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

Answer 1

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

Answer 2

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

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

您可以从参数映射中创建键数组，过滤掉没有值的项，然后将它们重新组合在一起作为查询参数。

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

Answer 3

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

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

也非常简单且易于维护。

Answer 4

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

params:{

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

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

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

4 个答案: