如何在HTTP服务调用中忽略无值的可选查询字符串参数？

我需要发起一个支持传递可选查询字符串参数的API调用，以下是我的代码片段：

retrieveConts(param1:string,param2?:string):Observable<IContracts> { 
  this.basePath = "/myConts"; 
  return http.get(this.basePath,{ 
    params: { 
      arg1:param1, 
      arg2:param2, 
    }, 
    withCredentials: false 
  }) 
  .catch(this._errorHandler); 
}

我已将param2声明为可选参数，但当param2无值时会返回undefined。请问如何让服务调用在param2无值时忽略arg2参数？

这里有几种简单实用的方法可以解决这个问题，让你的API调用在param2没有有效值时自动跳过arg2参数：

方法一：提前构建参数对象 #

先初始化基础的参数对象，只有当param2存在有效值时，再给对象添加arg2属性，这样就不会把undefined传入请求参数里：

retrieveConts(param1:string,param2?:string):Observable<IContracts> { 
  this.basePath = "/myConts";
  // 先创建包含必填参数的对象
  const params = { arg1: param1 };
  // 仅当param2有值时，才添加arg2参数
  if (param2) {
    params.arg2 = param2;
  }
  return http.get(this.basePath,{ 
    params, 
    withCredentials: false 
  }) 
  .catch(this._errorHandler); 
}

方法二：用对象展开运算符简化逻辑 #

可以借助对象展开和条件判断，一行代码完成参数的动态构建，逻辑更简洁：

retrieveConts(param1:string,param2?:string):Observable<IContracts> { 
  this.basePath = "/myConts"; 
  return http.get(this.basePath,{ 
    params: { 
      arg1: param1,
      // 只有param2存在有效值时，才展开这个包含arg2的对象；否则不会添加该属性
      ...(param2 && { arg2: param2 })
    }, 
    withCredentials: false 
  }) 
  .catch(this._errorHandler); 
}

这里的逻辑是：如果param2非空、非undefined，就会展开{ arg2: param2 }这个对象；如果param2无值，表达式返回undefined，展开undefined不会对原参数对象产生任何影响，刚好跳过arg2。

方法三：利用Angular HttpParams链式操作（专属方案） #

如果你使用的是Angular的HttpClient，推荐用HttpParams的链式set方法，它会自动忽略空值参数，也符合Angular的最佳实践：

retrieveConts(param1:string,param2?:string):Observable<IContracts> { 
  this.basePath = "/myConts";
  // 初始化必填参数
  let params = new HttpParams().set('arg1', param1);
  // 有值时再添加可选参数
  if (param2) {
    params = params.set('arg2', param2);
  }
  return http.get(this.basePath,{ 
    params, 
    withCredentials: false 
  }) 
  .catch(this._errorHandler); 
}

HttpParams本身是不可变对象，每次set都会生成新的实例，同时内部会自动过滤掉空值参数，避免请求里出现arg2=undefined的情况。

内容的提问来源于stack exchange，提问作者Seloka