接口多参数优雅封装

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

我以前的做法

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

ts 复制代码

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

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

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

ts 复制代码

 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)方法可以不断往里面添加参数

下面是更改后的代码

ts 复制代码

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

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

前端接口多参数请求时如何优雅封装

接口多参数优雅封装

我以前的做法

解决办法