GET请求的参数中带空格如何传递url编码

点击查看原文

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

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


// 手动对get请求的参数进行编码后，之前的参数在URL中显示如下
user_list?start_time=2021-02-03%2000%3A00%3A00&end_time=2021-02-06%2023%3A59%3A59

// 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)
  }
)