接口多参数优雅封装

开发中经常会遇到有一个接口需要的query参数比较多，
参数的数据类型也不全是 string | number ，还存在数组或者其他类型的情况。

我以前的做法

因为是query参数，我以前的写法就是在接口地址上面进行字符串拼接。

 async function getJobList(

    clusterId: string,

    page: number,

    pageSize: number,

    JobName : string,

    JobStatus : string,

    Username : string,

    Queue : string,

    StartTime: string,

    EndTime: string
) {
if (JobStatus == undefined) JobStatus = '';
const res = await apiRequest.get(
`/api/Cluster/${clusterId}/Job?page=${page}&pageSize=${pageSize}&JobName=${JobName}&JobStatus=${jobStatus}&Username=${Username}&Queue=${Queue}&StartTime=${

        StartTime ? StartTime : ''}&EndTime=${EndTime ? EndTime : ''}`

    );
return res;

  }

以前觉得这样做没什么问题，就是写起来很不优雅，代码的可读性也特别差。

那能不能不安代码的格式化自己整理一下表呢？为方阅读这样去写

 const res = await apiRequest.get(
`/api/Cluster/${clusterId}/Job?${page ? 'page=' + page : ''}
${pageSize ? '&pageSize=' + pageSize : ''}
${JobName ? '&JobName=' + JobName : ''}
${JobStatus ? JobStatus?.map((x) => '&JobStatus=' + x).join('') : ''}
${Username ? '&Username=' + Username : ''}
${Queue ? '&Queue=' + Queue : ''}
${StartTime ? '&StartTime=' + StartTime : '' }
${EndTime ? '&EndTime=' + EndTime : '' }`

    );

这种写法看起来更易读了，但是 ` 中的换行和空格会保留在里面，参数就会莫名的加上几个空格，查询参数就不对了（好心干坏事了）。

再说，如果参数更多呢，那岂不是要再去一个一个拼接，时间成本也太高了，有没有更优雅的写法呢？

解决办法

在MDN上看到了这个URLSearchParams接口

URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。

通过URLSearchParams.append(name, value)方法可以不断往里面添加参数

下面是更改后的代码

 async function getJobList(

    clusterId: string,

    page: number,

    pageSize: number,

    JobName?: string,

    JobStatus?: Array<string>,

    Username?: string,

    Queue?: string,

    StartTime?: string,

    EndTime?: string
) {
if (JobStatus?.length == 0) JobStatus = null;
const add_params = {
page: page,
pageSize: pageSize,
JobName: JobName,
JobStatus: JobStatus,
Username: Username,
Queue: Queue,
StartTime: StartTime,
EndTime: EndTime,

    };
const searchParams = new URLSearchParams();
Object.keys(add_params).forEach((key) => {
if ( add_params[key] !== undefined && add_params[key] !== null ) {
const value = add_params[key];
if (Array.isArray(value)) {

          value.forEach((item) => searchParams.append(key, item));

        } else {

          searchParams.append(key, value);

        }

      }

    });
const res = await apiRequest.get(
`/api/Cluster/${clusterId}/Job?${searchParams.toString()}`

    );
return res;

  }

这样去写代码就整洁优雅了太多了