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

在请求中如果url包括特殊字符的话,可能会导致接口接收参数失败,所以前端一般会对特殊字符进行encode,方法有两种

  • encodeURI()

对整个url进行编码,会避开url中的功能性字符,例如,& ? [ ]

编码前:http://10.10.67.67:8080/api/chain/basic/users?params=+[
编码后:http://10.10.67.67:8080/api/chain/basic/users?params=%2b[

  • encodeURIComponent()

对某个参数进行编码,会编码所有特殊字符

编码前:http://10.10.67.67:8080/api/chain/basic/users?params=+[
编码后:http://10.10.67.67:8080/api/chain/basic/users?params=%2b%5B


在axios中就会对get请求的整个url进行encodeURI,导致有些get方法不能传[],所以在请求拦截器中可以对get方法单独处理,避开axios的encodeURI

myAxios.interceptors.request.use(
  config => {
    let url = config.url
    // get参数编码
    if (config.method === 'get' && config.params) {
      url += '?'
      let keys = Object.keys(config.params)
      for (let key of keys) {
        url += `${key}=${encodeURIComponent(config.params[key])}&`
      }
      url = url.substring(0, url.length - 1)
      config.params = {}
    }
    config.url = url
    return config
  },

你可能感兴趣的:(vue.js,axios,javascript)