背景

在列表页面中，日期时间筛选是比较常见的需求，之前都是用时间戳的，但是在新项目中使用时间字符串,如下格式

const params = {
  start_time: "2021-02-03 00:00:00",
  end_time: "2021-02-06 23:59:59"
  // ...略略略
}

但是在axios发送get请求时，会把params中的参数放到url地址中，如下

user_list?start_time=2021-01-28+00:00:00&end_time=2021-01-29+23:59:59

可以看到中间的空格特殊字符串使用+代替了，但是我们的后端并没有正确识别，所以在对空格处理时，需要手动编码，让后端同学能够正确取到值

思路

在查询一波资料后，决定使用encodeURIComponent对GET请求中的参数(仅仅是参数哦！)进行编码，可以对参数中的空格进行编码，后端可以正确解析出数据，避免axios处理特殊参数不符合预期值的问题

一般来说如果需要对参数进行编码，推荐encodeURIComponent

实现

GET请求参数编码

// get参数编码
function encodeURIParams(config) {
  let url = config.url
  url += '?'
  const keys = Object.keys(config.params)
  for (const key of keys) {
    url += `${key}=${encodeURIComponent(config.params[key])}&`
  }
  url = url.substring(0, url.length - 1)
  config.params = {}
  return url
}

在axios请求拦截器中使用

const httpIns = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API,
  // 超时时间
  timeout: 15000
})

// request拦截器
httpIns.interceptors.request.use(
  config => {
    // ...略略略
    if (config.method === 'get' && config.params) {
      config.url = encodeURIParams(config)
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

手动对get请求的参数进行编码后，之前的参数在URL中显示如下

user_list?start_time=2021-02-03%2000%3A00%3A00&end_time=2021-02-06%2023%3A59%3A59

参考

关于axios中的参数编码，参考自

axios不会对url中的功能性字符进行编码