axios 条件参数答案

【问题标题】：Axios conditional parametersaxios 条件参数
【发布时间】：2018-09-13 11:37:26
【问题描述】：

axios.get(globalConfig.FAKE_API, {
    params: {
        phone: this.phone,
        mail: this.mail
    },
})
.then((resp) => {
    this.req = resp.data
 })
.catch((err) => {
     console.log(err)
 })

在使用 Axios 进行 GET / POST 请求时，我有什么方法可以制作条件参数吗？比如我的mail参数为空，我就不会发送空参数，比如：someurl.com?phone=12312&mail=

【问题讨论】：

看看吧。 stackoverflow.com/a/38340730/4248342
Remove blank attributes from an Object in Javascript的可能重复

标签： javascript axios

【解决方案1】：

您可以在发出请求之前维护params 的变量，并且仅在具有以下数据时才添加密钥：

const params = {}
if (this.mail) { params.mail = this.mail }

或者你可以像下面这样，我们在...()括号之间写普通的js代码。我们正在添加一个三元条件。

axios.get(globalConfig.FAKE_API, {
  params: {
    phone: this.phone,
    ...(this.mail ? { mail: this.mail } : {})
  },
})

【讨论】：

... 是什么意思？我也可以将条件内联吗？喜欢mail !== undefined ? true : false
这是扩展运算符developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…。不，你不能这样做mail !== undefined ? true : false
已使用 ...({ mail: this.mail })，但我的获取请求仍在附加此 http://fake.com/users?phone=123&mail=
您确定对象扩展运算符符合您的预期吗？我刚刚在 Firefox 控制台中对其进行了测试，并且使用对象扩展运算符没有省略空/空值
扩展运算符从源对象中获取所有键并将这些键添加到目标对象，因为我们希望参数对象上的键 mail 这就是原因。如果没有任何意义，请告诉我。！

【解决方案2】：

Reghav Garg 的想法乍看之下很整洁，但多了一个可选参数，恐怕会变得凌乱。

您可以简单地使用下划线或 lodash 等常用实用程序库之一，并利用它们的 filter 函数：

const allParams = {
    mail: this.mail,
    phone: this.phone,
    // ...
};
axios.get(globalConfig.FAKE_API, {
   // 'Pick' takes only those elements from the object
   // for which the callback function returns true
   //
   // Double negation will convert any value to its boolean value,
   // so null becomes false etc.
   params: _.pick(allParams, (value, key) => { return !!value; })
})

【讨论】：

嗯，你是对的。对于批量属性检查，我不会建议我的答案。
(value, key) 是干什么用的？
这是箭头函数语法，有点像function(value, key) { ... } 的简写，但有副作用，比如没有自己的this 对象。很高兴声明回调：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
我应该把什么作为价值，在我的情况下是关键？
你不必在那里放任何东西。 (value, key) => { return !!value; } 定义了一个回调函数。 _.filter 将为allParams 中的每个元素调用该回调函数。对于每个调用，value 将是当前值（即this.mail 的内容），key 将是当前键（即“邮件”）。然后该函数使用该值来检查当前元素是否为空，是否应该包含在返回的对象中。