vue项目 get方式传参数组

超、凢脫俗 2022-09-04 05:43 131阅读 0赞

背景：多选下拉框的查询，需要给后端传的是个数组（get方式）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70]  
get方法传参数组的时候，会出现arr\[\]=1&arr\[\]=2这样的情况，这样的传参，后端是接收不到的，无法解析。

那么我们就需要转换成这样的格式：arr=1&arr=2

## 解决方法： ##

1、这里，需要安装一个插件----qs插件，在vue项目中`npm add qs`即可。  
2、在拦截器文件（一般是自己项目中封装的request.js文件）中引入`import qs from 'qs'`  
并加入下面这段重点代码：

// request interceptor
    service.interceptors.request.use(
      config => { 
        // do something before request is sent
        if (store.getters.token) { 
          config.headers['token'] = store.getters.token
        }
    
        // get方法传递数组的处理（重点代码）
        if (config.method === 'get') { 
          config.paramsSerializer = function(params) { 
            return qs.stringify(params, {  arrayFormat: 'repeat' })
          }
        }
    
        return config
      },
      error => { 
        // do something with request error
        console.log(error) // for debug
        return Promise.reject(error)
      }
    )

备注：

qs.stringify({  a: ['b', 'c'] }, {  arrayFormat: 'indices' })
    // 'a[0]=b&a[1]=c'
    qs.stringify({  a: ['b', 'c'] }, {  arrayFormat: 'brackets' })
    // 'a[]=b&a[]=c'
    qs.stringify({  a: ['b', 'c'] }, {  arrayFormat: 'repeat' })
    // 'a=b&a=c'
    qs.stringify({  a: ['b', 'c'] }, {  arrayFormat: 'comma' })
    // 'a=b,c'

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70]: /images/20220829/460af3dfe44c42da92d8854b87e81da6.png