记一次el-date-picker踩坑事件

昨天把上个月比赛用的后台管理系统优化后打包发给舍友，上线后他发现了一个问题：系统日志查询模块选择开始和结束时间点进行查询是没有相应返回想要的时间段数据的，仔细看了下接口文档才发现查询所需的开始与结束时间这两个参数是需要嵌入到url当中，而我一开始直接把参数都整合到参数体中，那直接改一下请求接口方法就好了：

export function logQuery(params) {
    return request({
      url: `/log/list-query/${params.pageNum}/${params.pageSize}`,
      method: 'post',
      params: { // 将时间参数嵌入到url当中
        startTime: params.startTime,
        endTime: params.endTime
      },
      data: {
        methodName: params.methodName,
        packageName: params.packageName,
        className: params.className,
        status: params.status,
        userId: params.userId
      }
    })
}

但是后面出现了新问题：虽然我选择正常的时间段进行查询可以返回预期时间段的数据，但是如果我在 el-date-picker 中点击清除文本框内容再进行查询，传入接口的时间请求参数就全部变成了 '1970-01-01 08:00:00'，这时候请求接口就会获取错误的数据：

但是按理来说 el-date-picker 点击清除按钮会默认返回 null，后面排查了好久，原来是我的时间格式化函数出了问题，这是我一开始的写法：

// 错误写法
timeFormat(timeVal) {
  const time = new Date(timeVal)
  if (timeVal === null) return ''
  else return this.$moment(time).format('YYYY-MM-DD HH:mm:ss')
},

一开始我的时间格式化函数是这样写的，但是这么写犯了个严重错误，当 el-date-picker 情况时会返回 null，但是此时 new Date(null) 的结果就是 '1970-01-01 08:00:00'，那么后续的 if 判断就相当于没什么作用，后续对格式化函数代码进行更改：

// 正确写法
timeFormat(timeVal) {
  if (timeVal === null) return ''
  else {
    const time = new Date(timeVal)
    return this.$moment(time).format('YYYY-MM-DD HH:mm:ss')
  }
},

这么写完后应该是没有问题了，但是紧接着bug又来了，当我的时间参数设置为空时，最终传入的参数却变成了 'Invalid Date' ，不符合普通时间格式的参数传进去肯定会报错，后面查了一下资料，原来当 el-date-picker 的日期值无法解析为 JavaScript 中的有效日期格式时，它会被解析为 “Invalid Date”，那就在请求接口的方法再加一个限制吧：

export function logQuery(params) {
  // 对 'Invalid date' 格式的参数进行简单处理
  if (params.endTime === 'Invalid date') params.endTime = ''
  if (params.startTime === 'Invalid date') params.startTime = ''
  return request({
    url: `/log/list-query/${params.pageNum}/${params.pageSize}`,
    method: 'post',
    params: {
      startTime: params.startTime,
      endTime: params.endTime
    },
    data: {
      methodName: params.methodName,
      packageName: params.packageName,
      className: params.className,
      status: params.status,
      userId: params.userId
    }
  })
}

最后终于是可以正常请求接口了：