检查 API 调用查询参数是否有 !== 空值答案

【问题标题】：Check API call query parameters for !== null values检查 API 调用查询参数是否有 !== 空值
【发布时间】：2020-07-05 20:59:52
【问题描述】：

我只想提交值为 !== null 的 queryParams 参数，但我不知道如何写下来。所以提交函数是这样的：

onSubmit() {        
    const queryParams =
        '&name=' +
        this.name +
        '&date_from=' +
        this.startDate +
        '&date_to=' +
        this.endDate;

    this.callAPI({
        queryParams: queryParams
    });
}

我不确定在哪里进行检查...我意识到这样的事情是错误的：

this.callAPI({
    queryParams: queryParams !== null
});

什么是检查这个的正确方法？

【问题讨论】：

标签： javascript angular typescript api

【解决方案1】：

我遇到了这个问题，所以我编写了自己的函数来解决这个问题。

const setParams = obj => {
    const params = new URLSearchParams();
    for (let [key, value] of Object.entries(obj)) {
        if (value) { // check here for null or whatever you want
            params.append(key, value);
        }
    }
    return params;
};

并像这样将参数作为对象传递：

{
  name: 'lablablab',
  date: 'someDate',
  ...
}

【讨论】：

使用 Array.prototype.reduce 方法会更好看 ;)

【解决方案2】：

简单的方法

onSubmit() {      

    const { name, startDate, endDate} = this;

    let queryparams = ``;

    if(name) {
        queryparams.concat(`&name=${name}`)
    }
    if(startDate) {
        queryparams.concat(`&date_from=${startDate}`)
    }
    if(endDate) {
        queryparams.concat(`&end_from=${endDate}`)
    }

    this.callAPI({
        queryParams
    });
}

【讨论】：

【解决方案3】：

queryParams 永远不会是 null，因为您将其连接为字符串。

相反，如果您需要确保 name、startDate 和 endDate 具有值。您需要检查它们：

onSubmit() {
    if(!this.name || !this.startDate || !this.endDate){
        return;
    }

    const queryParams =
        '&name=' +
        this.name +
        '&date_from=' +
        this.startDate +
        '&date_to=' +
        this.endDate;

    this.callAPI({
        queryParams
    });
}

【讨论】：

【解决方案4】：

你需要这样做：

const queryParams = `${this.name !== null ? '&name=' + this.name : ''}${this. startDate !== null ? '& date_from =' + this. startDate : ''}${this. endDate !== null ? '& date_to =' + this. endDate : ''}`; 

this.callAPI({
        queryParams: queryParams
    });

这里我使用模板字符串，它非常适合将变量附加到字符串。在里面你可以看到三元运算符，它是缩短 if..else 语句并且可以内联使用

【讨论】：

【解决方案5】：

queryParams 不能为空，因为您要添加 '&name='、'&date_from=' 和 '&date_to'，即使 this.name 、this.startdate 和 this.enddate 为空或未定义。

所以试试这样

onSubmit() {  
     if(this.name && this.startDate && this.endDate)
     {
        const queryParams =
        '&name=' +
        this.name +
        '&date_from=' +
        this.startDate +
        '&date_to=' +
        this.endDate;

        this.callAPI({
           queryParams: queryParams
         });

     }     
   }

【讨论】：

【解决方案6】：

构建一个对象，过滤掉空值，并将其余的动态连接成一个查询字符串：

const params = {
    name: this.name, 
    date_from: this.startDate, 
    date_to: this.endDate
};

const queryParams = Object.keys(params)
    .filter(k => params[k] !== null)
    .map(k => `${k}=${encodeURIComponent(params[k])}`)
    .join('&');

this.callAPI({ queryParams });

演示：

const params = {
  foo: null,
  bar: 'hello world',
  baz: 42
};

const queryParams = Object.keys(params)
  .filter(k => params[k] !== null)
  .map(k => `${k}=${encodeURIComponent(params[k])}`)
  .join('&');
  
console.log(queryParams);

【讨论】：