list在get请求怎么传值_vue中get请求如何传递数组参数

前言: vue中在与后端进行数据交互时&＃xff0c;使用axios发送请求&＃xff0c;不做配置直接使用get请求传递数组类型参数的时候&＃xff0c;后端是无法接收数据的&＃xff0c;需要对axios一些简单的配置才能让后端完美的接收数组

1、问题

示例代码

let params &＃61; {

statusList: [&＃39;OVERDUE&＃39;, &＃39;DELAY&＃39;]

}

this.$http.get(&＃39;/list&＃39;, params)

.then(res &＃61;> {})

.catch(e &＃61;> {})

上述代码在不做配置的时候请求信息为&＃xff1a;/list?statusList[]&＃61;OVERDUE&statusList[]&＃61;DELAY对于后端来说&＃xff0c;statusList[]形式的提交是无效的&＃xff0c;实际需要的是/list?statusList&＃61;OVERDUE&statusList&＃61;DELAY这种方式的提交。那么我们应该如何来解决这种问题呢&＃xff1f;

2、解决方案

2.1 qs插件

qs主要是增加一些安全性的查询字符串解析和序列化字符串的库&＃xff0c;qs的更多使用方式可以参考总结中提供的地址学习

1、qs.stringify({ a: [&＃39;b&＃39;, &＃39;c&＃39;] }, { arrayFormat: &＃39;indices&＃39; })

// 输出结果&＃xff1a;&＃39;a[0]&＃61;b&a[1]&＃61;c&＃39;

2、qs.stringify({ a: [&＃39;b&＃39;, &＃39;c&＃39;] }, { arrayFormat: &＃39;brackets&＃39; })

// 输出结果&＃xff1a;&＃39;a[]&＃61;b&a[]&＃61;c&＃39;

3、qs.stringify({ a: [&＃39;b&＃39;, &＃39;c&＃39;] }, { arrayFormat: &＃39;repeat&＃39; })

// 输出结果&＃xff1a;&＃39;a&＃61;b&a&＃61;c&＃39;

4、qs.stringify({ a: [&＃39;b&＃39;, &＃39;c&＃39;] }, { arrayFormat: &＃39;comma&＃39; })

// 输出结果&＃xff1a;&＃39;a&＃61;b,c&＃39;

上述我们列举了qs中的序列化几种配置&＃xff0c;其中{ arrayFormat: &＃39;repeat&＃39; }的序列化结果满足我们的条件

2.2 axios配置

axios中有一个专门对数据进行序列化的配置属性paramsSerializer

paramsSerializer: function(params) {

return Qs.stringify(params, {arrayFormat: &＃39;repeat&＃39;})

},

2.3 具体配置

我们可以在axios请求拦截器中对参数进行序列化配置

axios.interceptors.request.use(async (config) &＃61;> {

//只针对get方式进行序列化

if (config.method &＃61;&＃61;&＃61; &＃39;get&＃39;) {

config.paramsSerializer &＃61; function(params) {

return qs.stringify(params, { arrayFormat: &＃39;repeat&＃39; })

}

}

}

3、总结