vue项目中GET请求传数组类型参数

偏执的太偏执、 2022-12-10 05:57 179阅读 0赞

在AJAX异步请求为GET方式时，如果需要传递到后台的参数是数组类型，直接通过query的方式会有问题，参数在URL上的展示形式如下：

参数：\{name:\[‘张三’,'李四','王五','赵六'\]\}

url：[https://mp.csdn.net/console/editor/html/108768288][https_mp.csdn.net_console_editor_html_108768288]

通过query的方式传参，请求url变成了下面这样

[https://mp.csdn.net/console/editor/html/108768288][https_mp.csdn.net_console_editor_html_108768288]?name\[\]=张三&id\[\]=李四&id\[\]=王五&id\[\]=赵六

这样服务端解析的参数是错误的，下面介绍两种我曾经是用过的方式：

### 1.直接将参数拼接在url ###

这种方式简单粗暴，直接遍历name数组，拼接在url后面

let name=[‘张三’,'李四','王五','赵六'];
    
    let str="?"
    
    for(var index in name){
        str+='name='+name[index]+'&'
    }
    
    let url='https://mp.csdn.net/console/editor/html/108768288'+str

### 2.使用qs做参数序列化 ###

qs主要是增加一些安全性的查询字符串解析和序列化字符串的库，详细文档：[https://www.npmjs.com/package/qs][https_www.npmjs.com_package_qs]

qs中的序列化一般有以下几种配置，

1、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
    // 输出结果：'a[0]=b&a[1]=c'
    2、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
    // 输出结果：'a[]=b&a[]=c'
    3、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
    // 输出结果：'a=b&a=c'
    4、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' })
    // 输出结果：'a=b,c'

其中\{ arrayFormat: 'repeat' \}的序列化结果满足我们的条件，我们可以在axios请求拦截器中对参数进行序列化配置，具体实现代码如下：

a.安装qs

npm i qs

b.在axios请求方法文件中使用，我的文件名是request.js

// request.js
    
    import qs from 'qs'
    
    ....
    
    
    
    axios.interceptors.request.use(async (config) => {
    //只针对get方式进行序列化
     if (config.method === 'get') {
      config.paramsSerializer = function(params) {
       return qs.stringify(params, { arrayFormat: 'repeat' })
      }
     }
    }

[https_mp.csdn.net_console_editor_html_108768288]: https://mp.csdn.net/console/editor/html/108768288
[https_www.npmjs.com_package_qs]: https://www.npmjs.com/package/qs